通过重定向到其他路由路径来反应滚动

Question

我构建的页面有问题。有像“/”这样的主路由路径，那里是所有页面，但也有路由路径“/privacy”，您可以通过单击“隐私政策”按钮进入该路径。主导航和带导航的页脚也显示在“/”和“/privacy”。

看起来像这样：

        <Route exact path="/">
            <Header />
            <Main />
            <Footer />
        </Route>
        <Route path="/privacy">
            <Header />
            <Privacy />
            <Footer />
        </Route>

主要组件如下所示

const Main = () => {


return (
    <>
        <Hello />
        <Services />
        <Projects />
        <About />
        <Contact />
    </>
)}

导航中的所有按钮都是反应滚动链接。

         <ul>
            <li><Link to="header" smooth="true" duration={1000}>Main</Link></li>
            <li><Link to="services" smooth="true" duration={1000}>Services</Link></li>
            <li><Link to="webdev" smooth="true" duration={1000}>Portfolio</Link></li>
            <li><Link to="about" smooth="true" duration={1000}>About</Link></li>
            <li><Link to="contact" smooth="true" duration={1000}>Contact</Link></li>
         </ul>

当用户单击导航中的“关于”按钮时，如何将用户从“/privacy”重定向并滚动到 - 例如 - 关于我的“/”路由路径中的组件？

示例：

用户在“/privacy”，他想阅读“关于”部分，因此他单击导航中的“关于”按钮，然后网站重定向到“/”并滚动到“关于”部分。

Answer 1

所以。添加到组件的组件/根元素 about id="about" 然后在你的 link 设置路径 https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a)

找到有关如何制作 link 到同一页面内容的信息

通过重定向到其他路由路径来反应滚动

React scroll with redirect to other route path

javascript

reactjs

react-router

react-scroll