8.React路由

目前都是前端出路由与页面转换这种，后端只出接口

目录

1  安装 react-router-dom

2  简单使用

3  组件中改变路由（编程式导航）

4  模糊匹配与精确匹配

5  嵌套路由

---

1  安装 react-router-dom

目前手脚架中创建后没有react-router-dom，所以我们需要自己安装一下

v6与v5在使用上有些差别，视频中的介绍的是v5的使用方法，我文章中写的是v6的使用方法

• 视频地址 92-路由的基本使用_哔哩哔哩_bilibili P92

之后我们进行导入，BrowerRouter,Route,Routes都不是形参，而是在React中它就叫这个名字

2  简单使用

• Routes必须放在BrowserRouter中，Route必须放在Routes中
• 每一次url变化都会按照书写顺序匹配所有的Route
• BrowerRouter一个React项目中只使用一次，它的内部包含着关于React路由的所有东西
• 可以使用HashRouter替代BrowerRouter，HashRouter的特点是url中存在 # ，比如 localhost:3000/#/first
• Route的作用是让某个组件写在某个路由上

打开后可以看到页面一的内容

当访问/second时可以看到页面二的内容

之后我们再使用Link

• Link写在Routes上方就会渲染再Routes上方，写在Routes下方就会渲染再Routes下方
• link组件会被渲染成a标签，to属性的内容就是a标签的href

打开后就多了这样一个链接

点击后会将地址转到/second

3  组件中改变路由（编程式导航）

可以使用useNavigate，下面这种方法只能在 函数组件 中使用

• v5中是通过props改变url，比如 this.props.history = "/login"

点击地址后会改变url

如果你将navigate()的参数搞为-1，那么它就会返回上一个你访问的页面

点击后可以返回

4  模糊匹配与精确匹配

在v5中默认情况下访问 /login会匹配上 /

模糊匹配P97,精确匹配P98 97-匹配模式（1模糊匹配模式）_哔哩哔哩_bilibili

在v6中没有这种问题，默认情况下就是精确匹配

5  嵌套路由

嵌套路由相对于v5有一些区别，我们举个v6的例子，现在我们要有/home/这个路由，也要有/home/news这个路由

文件结构是下面这样的

首先在App.js中创建第一级/home路由，这里一定要加入*

然后在文件夹Home中的index.js创建news路由

文件夹News中的index.js是这样的

/home路由打开后是这样的

访问/home/news，既会出现home的内容，也会出现news的内容