反应滚动并重定向到其他路由路径答案

【问题标题】：React scroll with redirect to other route path反应滚动并重定向到其他路由路径
【发布时间】：2021-02-09 15:57:38
【问题描述】：

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

看起来像这样：

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

主组件如下所示

const Main = () => {


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

nav 中的所有按钮都是 react-scroll 链接。

         <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”，他想阅读“About”部分，所以他点击导航中的“About”按钮，然后网站重定向到“/”并滚动到“About”部分。

【问题讨论】：

标签： javascript reactjs react-router react-scroll

【解决方案1】：

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

【讨论】：