React Router

2021-07-21 00:53 JavaScript笔记

图片

1 路由

一个单页应用里,可能会划分为多个页面。

如果要在单页应用中完成组件的切换,需要实现下面两个功能:

  • 根据不同的页面地址,展示不同的组件(核心)
  • 完成无刷新的地址切换 我们把实现了以上两个功能的插件,称之为路由。

如果React中在页面中实现路由,需要安装react-router-dom库。react-router:路由核心库,包含诸多和路由功能相关的核心代码 react-router-dom:利用路由核心库,结合实际的页面,实现跟页面路由密切相关的功能

2 两种模式

Hash Router 哈希路由

根据url地址中的哈希值来确定显示的组件。

原因:hash的变化,不会导致页面刷新 这种模式的兼容性最好

Borswer History Router 浏览器历史记录路由

HTML5出现后,新增了History Api,从此以后,浏览器拥有了改变路径而不刷新页面的方式。

History表示浏览器的历史记录,它使用栈的方式存储。

  • history.length:只读属性,获取栈中数据量
  • history.pushState(state, title[, url]):向当前历史记录栈中加入一条新的记录
  • history.replaceState(stateObj, title[, url]):将当前指针指向的历史记录,替换为某个记录

3 路由组件

Router组件

它本身不做任何展示,仅提供路由模式配置,另外,该组件会产生一个上下文,上下文中会提供一些实用的对象和方法,供其他相关组件使用,有下面两种模式的Router组件:

  • HashRouter:该组件,使用hash模式匹配
  • BrowserRouter:该组件,使用BrowserHistory模式匹配

通常情况下,Router组件只有一个,将该组件包裹整个页面,引入项目的时候取别名Router。

import {BrowserRouter as Router} from 'react-router-dom'

Route组件

根据不同的地址,展示不同的组件

重要属性:

  • path:匹配的路径

默认情况下,不区分大小写,可以设置sensitive属性为true,来区分大小写;

默认情况下,只匹配初始目录,如果要精确匹配,配置exact属性为true

<Router>
<Route path='/a' component={A} />
{/* 访问/a/b 同时匹配了组件A B */}
<Route path='/a/b' component={B} />
<Route path='/a/c' component={C} />
</Router>

如果不写path,则会匹配任意路径。

  • component:匹配成功后要显示的组件
  • children:
  1. 传递React元素,无论是否匹配,只要渲染一定会显示children,并且会忽略component属性
  2. 传递一个函数,该函数有多个参数,这些参数来自于上下文,该函数返回react元素,则一定会显示返回的元素,并且忽略component属性

Route组件可以写到任意的地方,只要保证它是Router组件的后代元素

Switch组件

写到Switch组件中的Route组件,当匹配到第一个Route后,会立即停止匹配。这个跟js语法中的switch类型,可以留一个兜底的组件。

由于Switch组件会循环所有子元素,然后让每个子元素去完成匹配,若匹配到,则渲染对应的组件,然后停止循环。因此,不能在Switch的子元素中使用除Route外的其他组件。

<Router>
<Switch>
{/* 注意书写顺序 */}
<Route path='/news' component={News} />
<Route path='/' component={Index} />
</Switch>
</Router>

4 路由信息

Router组件会创建一个上下文,并且,向上下文中注入一些信息,该上下文对开发者是隐藏的,Route组件若匹配到了地址,则会将这些上下文中的信息作为属性传入对应的组件,有如下三个属性:

history

它并不是window.history对象,我们利用该对象实现本站地址无刷新跳转,有如下的方法:

  • push(地址[,状态数据]):将某个新的地址入栈,状态数据跳转的时候有,直接访问没有状态数据
  • replace:将某个新的地址替换掉当前栈中的地址
  • go: 与window.history.go一致
  • goBack: 与window.history.back一致
  • goForward: 与window.history.forward一致
import React from 'react';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';

function A(props) {
console.log(props);
return <div>
<h1>A</h1>
<button onClick={()=>{
props.history.push("/b")
}}>go to b</button>
</div>
}
function B(props) {
return <div>
<h1>B</h1>
<button onClick={()=>{
props.history.push("/a")
}}>go to a</button>
</div>
}

export default function App() {
return (
<Router>
<Switch>
<Route path="/a" component={A} />
<Route path="/b" component={B} />
</Switch>
</Router>
);
}

React-Router中为什么没有直接使用history对象?

React-Router中有两种模式:Hash、History,如果直接使用window.history,只能支持一种模式, 当使用windows.history.pushState方法时,没有办法收到任何通知,将导致React无法知晓地址发生了变化,结果导致无法重新渲染组件。

location

与history.location完全一致,是同一个对象,但是,与window.location不同,location对象中记录了当前地址的相关信息。

图片

我们通常使用第三方库query-string,用于解析地址栏中的数据。

match

该对象中保存了,路由匹配的相关信息。

  • isExact:boolean,当前的路径和路由配置的路径是否是精确匹配
  • params:对象,获取路径规则中对应的数据 实际上,在书写Route组件的path属性时,可以书写一个string pattern(字符串正则)
<Route path="/news/:year/:month/:day" component={News} />

访问的地址:/news/2021/09/02图片

  • path:字符串,要求匹配的格式字符串
  • url:字符串,满足匹配的真实字符串

React-Router内部使用了第三方库:Path-to-RegExp,该库的作用是,将一个字符串正则转换成一个真正的正则表达式。

5 向某个页面传递数据的方式:

  1. 使用state:在push页面时,加入state,在location对象获取传来的数据;
  2. 利用search:把数据填写到地址栏中的?后;
  3. 利用hash:把数据写在hash后;
  4. params:把数据填写到路径中

非路由组件获取路由信息

某些组件,并没有直接放到Route中作为componet属性,而是嵌套在其他普通组件中,因此,它的props中没有路由信息,如果这些组件需要获取到路由信息,可以使用下面两种方式:

  1. 将路由信息从父组件一层一层传递到子组件
  2. 使用react-router提供的高阶组件withRouter,包装要使用的组件,该高阶组件会返回一个新组件,新组件将向提供的组件注入路由信息。

6 Link

生成一个无刷新跳转的a元素。

  1. to属性 可以是一个跳转的地址字符串,或者是一个对象,有如下属性
  • pathname url路径
  • search
  • hash
  • state
  1. replace 布尔属性,表示是否替换当前地址,默认是false
  2. innerRef ref对象或者函数, 可以将内部a元素的ref附着在传递的对象或函数参数上

7 NavLink

一种特殊的Link,Link具备的功能都有,额外增加了匹配成功后样式变化的功能,默认匹配成功的时候是active类名。

  • activeClassName:匹配时使用的类名
  • activeStyle:匹配时使用的样式
  • exact:是否精确匹配
  • sensitive:匹配时是否区分大小写
  • strict:是否严格匹配最后一个斜杠

8 Redirect

重定向组件,加载到该组件的时,会自动跳转(无刷新)到另外一个地址。

  • to 跳转的地址
  • push:默认为false,表示是替换的方式
  • from:当匹配到from地址规则时才进行跳转
  • exact:是否精确匹配
  • sensitive:匹配时是否区分大小写
  • strict:是否严格匹配最后一个斜杠
JavaScript笔记
JavaScript笔记
面向前端开发人员或IT爱好者提供:Web前端最新资讯、原创内容、JavaScript、HTML5、Ajax、jQuery、Node.js、Vue.js、React、Angular、求职面试等一系列教程和经验分享。
11篇原创内容
公众号


本文章转载自公众号:gh_203d283b08c7

首页 - JavaScript 相关的更多文章: