如何正确配置 React 路由器以导航到新页面？

Question

我有一个包含 3 个锚点的导航栏，我想在单击每个锚点时在不同页面之间导航。我已经使用 react-router（版本 6.3.0）来实现这一点，但我遇到了两个问题并且我得到了一个堆栈。

第一个是当我单击 LaunchApp 锚点时，URL 更改为 http://localhost:3000/launchApp 页面显示其内容但在顶部主页，而不是新页面。第二个是当我刷新页面时，页面没有返回到主页（http://localhost:3000）但它呈现了我点击的最后一个锚点。

App.js

return (
  <s.Main>
    <>  
      <Navbar/>
      <HeroSection/>
      <About/>
      <Testimonials/>
      <ContactForm/>
      <Footer/>
      <Routes>
        <Route path="/" element={<HeroSection/>}/>
        <Route path="/about" element={<About/>}/>
        <Route path="/launchApp" element={<LaunchApp />}>
        <Route path="submitSubscription" 
                element={<SubmitSubscription/>}/>
        <Route path="CancelSubscription" 
                element={<CancelSubscription />}/>
        </Route>
      </Routes> 
    </>
  </s.Main>
);

导航栏return

return (
  <nav> 
    <ul>
      <li>
        <Link to="/">Home</Link> 
      </li>
      <li>
        <Link to="/about">About</Link> 
      </li>
      <li>
        <Link to="/launchApp">Launch App</Link>     
      </li>      
    </ul>
  </nav>
)

我是不是漏掉了什么？

Answer 1

您正在两次渲染多个组件，一次是无条件地在 App 中，然后是有条件地在一条路线中。如果我没理解错的话，您不希望路由内容与主页内容重复。

删除不在路线上的重复组件，并将路线向上移动到 Navbar 和 Footer 组件之间。

示例：

return (
  <s.Main>
    <Navbar/>
    <Routes>
      <Route path="/" element={<HeroSection />} />
      <Route path="/about" element={<About />} />
      <Route path="/launchApp" element={<LaunchApp />} />
    </Routes>
    <Testimonials/>
    <ContactForm/>
    <Footer/>
  </s.Main>
);

要在页面加载时处理重定向回“主”页面，请使用 useNavigation 挂钩在应用程序组件的挂载 useEffect 挂钩中重定向。

示例：

import { Routes, Route, useNavigate } from 'react-router-dom';

const App = () => {
  const navigate = useNavigate();

  React.useEffect(() => {
    navigate("/", { replace: true });
  }, []); // note *

  return (
    <s.Main> ... </s.Main>
  );
};

* linter 可能会抱怨缺少依赖项导航，它是一个稳定的引用并且可以安全添加。

如何正确配置 React 路由器以导航到新页面？

How can I configure React router correctly to navigate to a new page?

reactjs

react-router

react-router-dom