React路由详解：从入门到高级实践
目录
2.5路由器（BrowserRouter 与 HashRouter）
1.React路由
1.1什么是路由
路由即为根据不同的url显示不同信息。
1.2前端为什么要用路由
在了解为什么要使用前端路由之前先了解一下何为SPA和MPA。
- SPA：单页面应用。
- MPA：多页面应用。
区别：是否二次向服务器发送请求获取html文件，我们点击页面中a标签的时候，就向url所在的服务器发送了请求。
前端路由是为了实现SPA应用而产生的，只用在页面加载的时候发送请求获取html文件，之后就只有数据的交互，而不是整个html。
- 优点：降低了带宽，提高了用户的体验性。
- 缺点：不利于SEO优化。
1.3React路由的原理
路由实现的主要依靠：
- ajax无刷新异步获取数据。
- BOM对象的history对象，是一个类似与栈的数据结构。
1.4路由组件VS一般组件
- 路由组件的props里会有三个重要属性history，match，location，而一般组件如果我们没有传递参数的话，默认props是一个空对象。
- 一般组件<Login/>这样写，而路由组件的写法如下：
<Route path="/login" component={Login}/> - 默认路由组件写在项目目录的pages文件夹里，而一般组件卸载component中。
1.5一般组件到路由组件(WIthRouter)
有的业务需求中一般组件也想用路由组件身上的三个属性，通过withRoter函数将组件作为参数传递进来，然后将这个新组件暴露出去就可以使用路由组件上的三个属性了。
2.React路由跳转
跳转的几种方式，其实都是通过history去操作的。
- Link或者NavLink实现跳转。
- 在地址栏中直接输入url实现跳转。
- 操作history中的replace，push，goBack实现跳转。
- 或者使用在render中使用Redirect实现路由跳转。
2.1Link标签和NavLink标签
Link和NavLink同样可以实现路由跳转，但是当点击对应的路由链接的时候，使用NavLink的路由链接就会给我们自动加上一个active的属性，然后会出现一个高亮的效果。也可以通过activeClassName加上我们自定义的类。
<Link to="/login">登录</Link>
<NavLink to="/login">注册</NavLink>2.2编程式路由导航
通过js绑定事件操作history中的 replace，push，goBack实现跳转。
2.3Route标签
通过Route标签来注册路由：
<Route path="/login" component={Login}/>
<Route path="/admin" component={Admin}/>
2.4Switch和Routes
路由匹配时从上往下一直匹配完，但是这样就会带来性能问题，明明我们以及匹配到了我们想要的注册路由，为什么还要往下注册呢，这不是无理取闹嘛。
其实我们Switch和Routes出现就很好的解决了这个问题，老版本中使用Switch，而新版本中用的Routes。
2.5路由器（BrowserRouter 与 HashRouter）
我们点了路由链接，React怎么知道就要去匹配对应的注册路由呢，其实我们是需要一个路由器 去统一管理的，将我们的路由链接和注册路由收入麾下，这样我们就可以知道点了路由链接之后跳去哪个注册路由了。
<Switch>
<Route path="/login" component={Login}/>
<Route path="/admin" component={Admin}/>
</Switch>2.6路由的精准匹配与模糊匹配
精准匹配：必须是path里面的路径和to里面的路径完全一致才能匹配的上（慎用）
模糊匹配：只要有就行了，也可以这么说to是不是以path开头的，如果是就可以匹配的上。
2.7路由的嵌套
包括二级路由和多级路由，在一个路由组件里面还包裹着一个或者多个路由组件。
2.8路由重定向(Redirect/Navigate)
当我们的用户在地址栏输入跟注册路由都不相匹配的地址时，我们想让地址重定向到默认的组件，那么我们就可以使用这种技术。Navigate是新版本中的写法。
<Redirect to="/admin"></Redirect>
<Route path="/" element={<Navigate to='/admin'/>}></Route>2.9二级路由样式丢失问题
刷新页面的时候改变了请求资源的地址，所以当React脚手架找不到我们需要的文件时，会把index.html的页面内容返回给我们。
2.10NavLink的封装
如果每一个NavLink都要加上activeClassName或者是一些相同的属性，那么代码冗余，重复代码多，我们可以通过封装一个解决这种情况。
<MyNavLink to="/login">注册</MyNavLink>所有传过来的属性都会在props里面，注册在props的children里面，to属性还是to属性，在jsx里面{...this.props}不是复制对象，这相当于把对象展开，只有jsx中支持这种语法。
MyNavLink组件：
<NavLink {...this.props}/>3.React路由传参
3.1传递state参数
传递：
<Link to={{pathname："/admin",state:{username:"caitao",password:"ctcx520"}}}></Link>接受：
this.props.location.state
3.2传递search参数
传递：
<Link to={`/admin/?id=${user.username}&title=${user.password}`}>登录</Link>接受：
this.props.location.search
但是接受的同样是后面的字符串，我们可以用querystring这个库中的parse和stringify这两个方法进行解析字符串操作
3.3传递params参数
传递：
<Link to={`/admin/${user.username}/${user.password}`}>登录</Link>- 接受格式：变量名
<Route path="/admin/:username/:password" component={Admin}/>- 然后在this.props.match.params下就可以看到
非常感谢您的阅读，欢迎大家提出您的意见，指出相关错误，谢谢！越努力，越幸运！
扫一扫
4189
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
