React入门学习-路由

目录

1.React路由

1.1什么是路由

1.2前端为什么要用路由

1.3React路由的原理

1.4路由组件VS一般组件

1.5一般组件到路由组件(WIthRouter)

2.React路由跳转

2.1Link标签和NavLink标签

2.2编程式路由导航

2.3Route标签

2.4Switch和Routes

2.5路由器（BrowserRouter 与 HashRouter）

2.6路由的精准匹配与模糊匹配

2.7路由的嵌套

2.8路由重定向(Redirect/Navigate)

2.9二级路由样式丢失问题

2.10NavLink的封装

3.React路由传参

3.1传递state参数

3.2传递search参数

3.3传递params参数

---

---

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下就可以看到

非常感谢您的阅读，欢迎大家提出您的意见，指出相关错误，谢谢！越努力，越幸运！