React Router - 两种路由模式

React Router的两种路由模式对比

两种路由模式：history模式和hash模式。
对于history模式，React Router使用createBrowserRouter函数创建。
对于hash模式，React Router使用createHashRouter函数创建。

https://reactrouter.com/en/main/routers/create-browser-router

https://reactrouter.com/en/main/routers/create-hash-router

路由模式	url表现	底层原理
history	url/login	h5的history对象+pushState事件
hash	url/#/login	监听h5的hashChange事件

实际开发中，如果后端支持得很好，就可以选用history模式；如果后端不方便提供支持，就选hash模式。

示例：用hash模式

路由配置模块，使用createHashRouter函数创建路由：

到浏览器中查看：
初始显示：

点击路由到 关于,url中含有了#号：

点击路由到面板：