时间戳

首页 > 解决方案 > 如何在 React JS 中从页脚菜单呈现新页面？

javascript - 如何在 React JS 中从页脚菜单呈现新页面？

问题描述

我用反应路由器尝试它，但不知何故它不会加载它。我想单击页脚中的链接，并应使用页脚和页眉呈现正确的页面。不知何故我没有让它工作，我阅读了反应路由器文档并按照步骤操作，但它不适用于我的情况：/

我的 App.js

  function App() {
      <>
      <Router>
        <Header />
        <Banner />
        <Material />
        <Product />
        <Final />
        <Switch>
          <Route path="/imprint" component={Imprint} />
        </Switch> 
        </Router>
      </>

在名为 Final 的页脚中，我调用了来自反应路由器的链接

<motion.div
   ref={ref}
            initial={{ color: "#000" }}
            animate={{ color: inView ? "#000":"#fffffd" }}
            transition={{
              duration: 2,
            }}
            className='footer'>
            <p className='footerContent'>© {today.getFullYear()} KANI Ltd. All rights reserved.</p>
            <Link to="/imprint">
              <p classname='impressum'>Imprint</p>
            </Link>
            <ul classname='iconList'>
              <li>
                <a href="#">
                  <img className='insta' src={process.env.PUBLIC_URL + `/images/instagram.png`}></img>
                </a>
              </li>
            </ul>
        </motion.div>

谢谢您的帮助。

编辑：

多描述一下我的问题：

如果我单击印记链接，它应该像这样呈现应用程序：

<Header />
<Imprint />
<Footer />

标签： javascriptreactjs

解决方案

因此，据我所知，您的开关仅适用于“印记”组件。您需要做的是将开关应用到您想要从字面上切入和切出的所有组件。您还可以添加一个 <BrowserRouter>. 因此，例如，您可以重新构建应用页面，使其如下所示：

  function App() {
      <>
       <BrowserRouter>
        <Header />
        <Switch>
         <Route exact path="/banner">
          <Banner />
         </Route>
         <Route exact path="/material">
          <Material />
         </Route>
         <Route exact path="/product">
          <Product />
         </Route>
         <Route exact path="/imprint">
          <Imprint />
         </Route>
        </Switch>
        <Final />
       </BrowserRouter>
      </>

这样，包含在其中的任何内容都<Switch> </Switch>将换入和换出，以及它之外的所有内容，例如标题，<Final>并将保留在每个页面的布局中。

推荐阅读