如何防止重新加载整个页面？我不想重新加载导航栏，只使用 react-router-dom 加载里面的组件

Question

如何防止整个页面/Navbar重新加载，我只想在不重新加载整个页面的情况下加载里面的组件。我在下面提到了这两个组成部分。

App.js

import { useState } from 'react';
import Navbar from './Navbar'
import {BrowserRouter as Router, Routes, Route} from "react-router-dom"; 
import Home from './Home';
import ToDoList from './ToDoList';
import Jobs from './Jobs';
const App = () => {

return(
<>
<Router>
<Navbar />
<Routes>
<Route path='/' element={<Home />}/>
<Route path= '/todolist' element={<ToDoList />}/>
<Route path= '/jobs' element={<Jobs/>}/>
</Routes>
</Router>
</>
)
}
export default App

Navbar.js

const Navbar = () => {
return(
<nav>
<ul>
<a href="/"></a>
<li>
<a href="/todolist">ToDoList!</a>
</li>
<li>
<a href="/jobs">Jobs</a>
</li>
</ul>
</nav>
)
}
export default Navbar

Answer 1

Navbar不会重新响应您的方法，因为它位于路由器上方。因此，对于任何更改，只有路由器组件才会被渲染。但这里的问题是您使用的是a标签，不应该在这里使用，因为React是SPA，您需要使用<link to="/url">Text</link>Doc

因此，在Navbar.js中，只需使用适当的道具将a标记更改为link，它就不会重新发布。除非父组件要重新发送。

import {Link} from "react-router-dom";
const Navbar = () => {
return(
<nav>
<ul>
<link to="/"></link>
<li>
<link to="/todolist">ToDoList!</link>
</li>
<li>
<link to="/jobs">Jobs</link>
</li>
</ul>
</nav>
)
}
export default Navbar