1

我构建的页面有问题。有像“/”这样的主要路由路径是所有页面，但也有路由路径“/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”，他想阅读“About”部分，所以他点击导航中的“About”按钮，然后网站重定向到“/”并滚动到“About”部分。

4

1 回答 1

1

所以。添加到组件的组件/根元素 about id="about" 然后在您的链接设置路径 <Link to="/#about"...... 您可以找到如何在同一页面上创建指向内容的链接的信息在这里（https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a）

于 2020-10-27T17:52:24.027 回答