HTML5的History

history接口是HTML5新增的, 它有六种模式改变URL而不刷新页面：

replaceState：替换原来的路径；

pushState：使用新的路径；

popState：路径的回退；

go：向前或向后改变路径；

forward：向前改变路径；

back：向后改变路径

认识react-router

目前前端流行的三大框架, 都有自己的路由实现:

Angular的ngRouter

React的ReactRouter

Vue的vue-router

React Router在最近两年版本更新的较快，并且在最新的React Router6.x版本中发生了较大的变化。

目前React Router6.x已经非常稳定，我们可以放心的使用；

安装React Router：

安装时，我们选择react-router-dom；

react-router会包含一些react-native的内容，web开发并不需要；

Router的基本使用

react-router最主要的API是给我们提供的一些组件：

BrowserRouter或HashRouter

Router中包含了对路径改变的监听，并且会将相应的路径传递给子组件；

BrowserRouter使用history模式；

HashRouter使用hash模式；

路由映射配置

Routes：包裹所有的Route，在其中匹配一个路由

Router5.x使用的是Switch组件

Route：Route用于路径的匹配；

path属性：用于设置匹配到的路径；

element属性：设置匹配到路径后，渲染的组件；

Router5.x使用的是component属性

exact：精准匹配，只有精准匹配到完全一致的路径，才会渲染对应的组件；

Router6.x不再支持该属性

路由配置和跳转

Link和NavLink：

通常路径的跳转是使用Link组件，最终会被渲染成a元素；

NavLink是在Link基础之上增加了一些样式属性（后续学习）；

to属性：Link中最重要的属性，用于设置跳转到的路径；

NavLink的使用

需求：路径选中时，对应的a元素变为红色

这个时候，我们要使用NavLink组件来替代Link组件：

style：传入函数，函数接受一个对象，包含isActive属性

className：传入函数，函数接受一个对象，包含isActive属性

默认的activeClassName：

事实上在默认匹配成功时，NavLink就会添加上一个动态的active class；

所以我们也可以直接编写样式

当然，如果你担心这个class在其他地方被使用了，出现样式的层叠，也可以自定义class

开启掘金成长之旅！这是我参与「掘金日新计划 · 2 月更文挑战」的第 14 天，点击查看活动详情