几种路由模式
BrowserRouter
后台需要配置，其主要的实现原理是使用 window.history。内部实现是通过createBrowserHistory创建了浏览器的历史实例，该实例通过调用HTML5历史API管理浏览器的历史状态。
- 通过监听popstate触发浏览器的前进与后退
- 通过监听pushstate实现跳转链接切换页面
- 采用hashchange作为备用方案
root.render(
<BrowserRouter basename='pc'> //会给当前组件下所有的路径前面加上，/pc，/pc/user。
<Routes>
<Route path="/app" element={<App />}/>
{/* The rest of your app goes here */}
</Routes>
</BrowserRouter> );
HashRouter
主要用于不支持HTML5历史API的浏览器和后退需要兼容的问题。
- URL 多了 # 前缀，变得不美观。
- 服务端渲染比较复杂，服务端只能看到路径部分，无法识别哈希部分，导致无法正确解析路由。
memoryRouter
内存型路由：提供了一个在内存中的历史记录来控制路由。
用于在没有真正的浏览器环境的情况下模拟路由行为。它主要用于测试环境和服务端渲染（SSR）中，因为它不需要真实的 window 对象和浏览器历史 API。
staticRouter
一般用于 nodejs 进行服务端渲染使用
node 没有 window 环境，用不了 BrowserRouter，staticRouter 只关心当前匹配的路由的内容，与其他路由无关，一定程度上提升了性能。
nativeRouter
ios，android 端使用，用于react-native。
react-router和react-router-dom区别
react-router-dom浏览器专用，采用react-router库
BrowserRouter在配置的时候有没有什么问题
- 需要后台配合，否则出现404。
- 前端什么时候需要页面数据，什么时候是接口请求，服务端需要通过匹配通配符来作出响应。
-
比如前端是需要访问页面组件：juejin.cn/app。
-
需要发送接口请求：(juejin.cn/api/app)
useLocation
可以获取一些 navigate,link 的信息。 我这里
//一个Bpp的组件
function Bpp() {
const location = useLocation();
console.log(location, "Bpp");
return <h1>bpp</h1>;
}
//一个按钮，点击进入Bpp页面
<button
onClick={() =>
navigate("bpp", { state: { name: "我是需要传给Bpp页面的数据" } })
}
>
去到Bpp
</button>
//Link标签
<button>
<Link
to="/user"
state={{ id: 123232424 }}
>去到user</Link>
</button>
Bpp:
User:
动态路由
需要完全匹配，当你使用后，URL就需要变成user/xxx,否则没有页面。
<Route
path="/user/:id" //将动态参数通过:拼接
element={<User />}
/>
通过useParams获取xxx,键名取决于你喜欢。
useSearchParams
获取到 URL的 ？拼接的路由参数通过 useSearchParams,多个参数 & 拼接,通过 setSearch 修改增加参数 比如URL拼接了?name=123
const [search, setSearch] = useSearchParams();
console.log(search.get("name")); //打印123
<button onClick={() => setSearch({ name: 123, age: 18 })}>
修改URL参数
</button>
useMatch
当与当前路由匹配时，返回当前匹配的路由信息
const params = useParams(); //获取动态参数
const match = useMatch(`/user/${params.id}`);//路径匹配
console.log("match", match);
数据路由
数据路由是react-router v6.4 最大的升级，
官方所说v6.4 是我们迄今为止最激动人心的版本，它具有用于读取、写入和导航挂钩的新数据抽象，可轻松让您的 UI 与数据保持同步。
传统路由：初始化 -> 路由切换，加载页面 -> 分包加载 -> 生命周期，拉取数据 -> 页面渲染
数据路由：初始化 -> 路由切换，加载页面 && 分包加载 && 生命周期，拉取数据 -> 页面渲染
并发加载，加快了页面渲染的速度
Router v6.4 解决的核心问题
它是为了解决瀑布流问题而生的
可以实现并行加载（核心）
- 路由对应的 UI 页面 /app ->App 组件
- 分包组件的 js，传统路由会先发送请求，拿到数据后再发请求去拿js，数据路由这两步会同时进行。
- 拉取组件或页面需要的数据
数据路由写起来比较复杂
- 将数据耦合到 UI 中，增加了项目的耦合性，维护成本升高
- 带来了直观的性能提升
