目录
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下就可以看到
非常感谢您的阅读,欢迎大家提出您的意见,指出相关错误,谢谢!越努力,越幸运!