多页应用又称 MPA（Multi Page Application）指有多个独立的页面的应用，每个页面必须重复加载 js,css 等相关资源。多页应用跳转，需要整个页面资源刷新。单页应用又称 SPA（Single Page Application）指的是使用单个 HTML 完成多个页面切换和功能的应用。这些应用只有一个 html 文件作为入口，一开始只需加载一次 js,css 等相关资源
React 创建的便是一个单页应用，React Router 根据路由或者链接的不同来呈现不同的内容。
React Router 是什么？
React Router 可以让开发人员实现动态路由，借助该 npm 包可以实现页面的呈现以及导航。
组件
BrowserRouter: 存储所有路由的父组件，通过此组件来启动定义的路由Switch: 仅渲染第一个与位置匹配的路由Route: 检查当前URL并显示与该URL关联的组件Link: 导航组件，指向指定的路由NavLink:Link的一个特殊版本，当它与当前URL匹配时，会高亮显示
如果你想使用 React Router v6 升级版本，你需要注意两个版本之间的异同:
将 Switch 替换为 Routes
v5 版本中，我们使用 Switch 组件来包裹路由，v6 版本中，路由包裹组件替换为 Routes
定义路由
v5 版本中，我们将组件渲染为与 URL 匹配的 Route 组件的子组件，v6 中渲染匹配路径需要使用名为 element 的特殊道具来传递我们的 JSX 组件。
无需使用 exact prop
由于匹配过程是从上往下完成路由定义的，因此 v5 版本中使用 exect prop 来防止渲染相关关键字开头的 URL 组件，v6 版本中改进了路由匹配算法，因此我们无需设置 exect prop
无需安装 react-router-config
v5 版本中，我们使用 react-router-config 来配置 JavaScript 对象格式的路由，v6 中此部分功能转移到了 v6 core 部分。
import { useRoutes } from ‘react-router-dom’;import Welcome from ‘./pages/Welcome’;
import Login from ‘./pages/Login’;const AppRoutes = () => {
const routes = useRoutes([
{ path: ‘/’, element: <Welcome /> },
{ path: ‘/’, element: <Login /> },
])
return routes;
}
useNavigate 替换 useHistory
v6 版本引入新的导航 useNavigate API ，替换 useHistory。
import { useNavigate } from "react-router-dom";
function News() {
let navigate = useNavigate();
return (
<div>
<button onClick={()=>{
navigate("/home");
}}>go home</button>
</div>
);
}
v5 版本中使用的 go ，goFoward，goBackard 方法，v6 版本中都可以使用 navigate API 实现。
<button onClick={() => navigate(-2)}>
2 steps back
</button>
<button onClick={() => navigate(-1)}>1 step back</button>
<button onClick={() => navigate(1)}>
1 step forward
</button>
<button onClick={() => navigate(2)}>
2 steps forward
</button>
移除 activeStyle 和 activeClassName
v5 中通过给 NavLink 组件设定单独的样式或者类来实现特定路由的高亮，v6 版本中，这两个 props 被替换为 style。
<NavLink
to="/news"
style={({isActive}) => { color: isActive ? 'blue' : 'black' }}>
Exchanges
</NavLink>
<NavLink
to="/news"
className={({ isActive }) => "nav-link" + (isActive ? "active" : "")} >
交流
</NavLink>
Navigate 替换 Redirect
v6 版本中使用 navigate 替换原有的 Redirect 功能
<Route path="/" element={<Navigate replace to="/welcome">}/>\
<Route path="/welcome" element={<Welcome />} />
