<Link> 来自 React Router 的标签 Dom V6 没有按预期工作

Question

我正在尝试创建一个 header，其中包含指向其各自组件的链接。使用 a 标签重定向到组件工作正常。

当我手动更改 URL 时，路由也能正常工作。但是当我使用 Link 标签重定向时，它会破坏网站并呈现一个空白页面。看看下面我的代码...

App.js

<Router>
      <Routes>
        <Route path="/" exact element={<Hero />}></Route>
        <Route path="experience" element={<Experience />}></Route>
        <Route path="photos" element={<Photography />}></Route>
      </Routes>
</Router>

Header.js

 <nav>
   <ul>
      <li>
         <Link to="/">Home</Link> // using Link renders blank page
      </li>
      <li>
         <Link to="/experience">Experience</Link> // using Link renders blank page
     </li>
      <li>
        <a href="/photos">Photography</a> // works fine
      </li>
   </ul>
 </nav>

我什至不需要点击 Link 来让网站崩溃，当 Link 标签是时，它会自动呈现一个空白页面使用过。

请让我知道哪里出错了

Answer 1

所以，基本上问题是我在 React Router 上下文之外使用了 Link 标签。那会破坏网站。

App.js（之前）

function App() {
 return (
 <Layout>
  <div className="App">
    <Router>
      <Routes>
        <Route path="/" exact element={<Hero />}></Route>
        <Route path="experience" element={<Experience />}></Route>
        <Route path="photos" element={<Photography />}></Route>
        <Route
          path="*"
          element={
            <main style={{ padding: "1rem" }}>
              <p>There's nothing here!</p>
            </main>
          }
        />
      </Routes>
    </Router>
  </div>
</Layout>
);
}

App.js（之后）

function App() {
 return (
 <div className="App">
  <Router>
    <Layout>
      <Routes>
        <Route path="/" exact element={<Hero />}></Route>
        <Route path="experience" element={<Experience />}></Route>
        <Route path="photos" element={<Photography />}></Route>
        <Route
          path="*"
          element={
            <main style={{ padding: "1rem" }}>
              <p>There's nothing here!</p>
            </main>
          }
        />
      </Routes>
    </Layout>
  </Router>
</div>
);
}

您可以找到更多关于此问题的详细信息

Answer 2

Header 组件在 Router 上下文之外，这似乎是问题所在。

<Link> 来自 React Router 的标签 Dom V6 没有按预期工作

<Link> tag from React Router Dom V6 not working as expected

javascript

reactjs

react-router

react-router-dom