<Link> 来自 React Router Dom V6 的标记未按预期工作

Question

我试图创建一个链接到各自组件的标题。使用a标签重定向到组件可以正常工作。

当我手动更改URL时，路由也可以正常工作。但是当我使用链接时标记来重定向它会破坏站点并呈现一个空白页面。请看下面的代码:

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>

我甚至不需要点击链接来中断站点，当链接时，它会自动呈现一个空白页面

请让我知道我哪里做错了

Answer 1

所以，基本上问题是我在React Router Context之外使用了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上下文之外，这似乎是问题所在。