duansamve的博客

按照如下文档安装，安装时如果一直等待，可以先删掉node_modules目录和package-lock.json文件再重新执行安装。

向浏览器历史记录栈中添加一条新记录。​​不会触发页面刷新或跳转​​。url是可选的，可以是相对路径或绝对路径（但必须同源）。替换当前历史记录，而不是新增。用途：比如更新当前页面的状态但不新增历史记录。​​window.onpopstate事件​​当用户点击浏览器的前进/后退按钮时触发。可以通过 event.state获取之前通过 pushState/replaceState 设置的状态。

在 React 18 中，通常你会在 src/main.jsx或 src/index.js中渲染你的 App 组件，并用 <BrowserRouter>包裹整个应用。​​src/main.jsx（或 src/index.js）​。

注意其中的NavLink及css中添加的active属性。注意其中的index: true。

默认情况下，开启的是 push 模式，也就是说，每次点击跳转，都会向栈中压入一个新的地址，在点击返回时，可以返回到上一个打开的地址，就像上图一样，我们每次返回都会返回到上一次点击的地址中当我们在读消息的时候，有时候我们可能会不喜欢这种繁琐的跳转，我们可以开启 replace 模式，这种模式与 push 模式不同，它会将当前地址替换成点击的地址，也就是替换了新的栈顶我们只需要在需要开启的链接上加上 replace 即可。

在上一篇中，我们学习了 React 中使用路由技术，以及如何使用 MyNavLink 去优化使用路由时的代码冗余的情况。这一节我们继续上一篇 React 路由进行一些补充。

路由是根据不同的 URL 地址展示不同的内容或页面在 SPA 应用中，大部分页面结果不改变，只改变部分内容的使用前端路由的优缺点优点用户体验好，不需要每次都从服务器全部获取整个 HTML，快速展现给用户缺点SPA 无法记住之前页面滚动的位置，再次回到页面时无法记住滚动的位置使用浏览器的前进和后退键会重新请求，没有合理利用缓存。

1、安装：cnpm i react-router react-router-dom -S2、引用：