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

所以。添加到组件/组件的有关id =“ about”的根元素，然后在链接设置路径https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a）处找到有关如何链接到同一页面上内容的信息

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

1 个答案: