第十节:React路由:react-router认识与基本使用

1. React Router的理解

React的路由根据项目的不同使用不同的路由库,web应用主要使用react-router和react-router-dom

react-router和react-router-dom的区别

react-rotuer 核心库,提供了一些核心的api,但是没有提供dom操作进行跳转的api
react-router-dom扩展了核心库,提供了一些操作DOM的api,
web应用正常使用react-router-dom就可以了, 因为它自己同样依赖react-router

2. 路由组件认识

2.1 路由组件的认识

在react中和vue不同的是,路由不是配置的文件,而是组件, 正常的组件嵌套使用

在React router中通常使用的组件有三种

路由器组件: 如BrowserRouter(history模式) 和 HashRouter(hash模式)
路由匹配组件: Route 和 Switch 组件
导航组件: Link 和 NavLink 组件

2.2. 相关API

<BrowserRouter>    // 路由器组件
<HashRouter>       // 路由器组件
<Route>            // 显示路由组件,嵌套在路由器组件中
<Switch>           // 路由切换组件,如果配置成功多个路由也只会显示第一个
<Link>             // 路由导航组件
<NavLink>          // 路由导航组件
<Redirect>         // 路由重定向组件

3. 路由组件的使用

3.1 下载路由组件库

$ npm install react-router-dom --save## or$ yarn add react-router-dom

3.2 路由器组件的使用

3.2.1 路由器组件说明:

每一个React Router应用程序的核心都应该是路由器组件
react-router-dom提供了BrowserRouter和HashRouter
BrowserRouter采用常规路径显示方式的history路由显示模式
HashRouter采用锚点显示的hash路由显示模式

3.2.2 BrowserRouter组件的使用

基本使用

采用history路由模式显示路由

示例代码:

// 导入路由器
import {BrowserRouter} from "react-router-dom"// 使用路由器组件嵌套根组件APP
ReactDOM.render(<BrowserRouter><App /></BrowserRouter>,document.getElementById('root')
);

为什么使用BrowserRouter嵌套根组件APP呢?

其实没有说一定要嵌套APP根组件, 只是导航组件和路由组件必须嵌套的路由器组件中才会有效,否则就会报错

因此只要在你是用的导航组件和路由组件外嵌套即可, 嵌套根组件表示整个应用任何位置都可以是使用路由组件

BrowserRouter路由器采用history前端路由模式, 因此在路径显示上没有#

如下:

http://localhost:3000/goods

3.2.3 HashRouter组件的使用

HashRouter采用hash模式的前端路由, 以此会出现#/home

示例代码:

// 导入路由器
import {HashRouter} from "react-router-dom"// 使用路由器组件嵌套根组件APP
ReactDOM.render(<HashRouter><App /></HashRouter>,document.getElementById('root')
);

路径显示结果:

http://localhost:3000/#/goods

3.2.4 路由器的别名使用

有的时候会将路由器组件在使用import导入是修改别名

示例代码如下

// 将HashRouter 路由器组件修改为别名Router使用
import {HashRouter as Router} from "react-router-dom"// 使用路由器组件的别名
ReactDOM.render(<Router><App /></Router>,document.getElementById('root')
);

3.3 路由匹配组件的使用

3.3.1 路由匹配组件Route的使用

Route组件用来控制路径对应显示的组件

说明:

Route组件基本的两个属性,一个是path,一个是component
path属性表示用来匹配路径,党路径匹配成功后展示component的内容
component属性值是将来用于展示的组件

示例代码如下:

import {Route, Link} from 'react-router-dom'
// 导入组件
import Home from "./components/Home"
import Goods from "./components/Goods"
import About from "./components/About"// App组件
function App() {return (<div className="App">{/* Route路由展示组件当path的值和路径匹配成功后显示component对应的组件*/} <Route path="/home" component={Home}/><Route path="/goods" component={Goods}/><Route path="/about" component={About}/></div>);
}

示例代码说明:

上面的示例代码,在默认打开是不显示任何组件内容,
默认打开的路径为/所以Route中的路径都匹配不成功
如果希望/路由对应的显示内容也为首页, 就可能会如下写法

示例代码

import {Route, Link} from 'react-router-dom'
import Home from "./components/Home"
import Goods from "./components/Goods"
import About from "./components/About"function App() {return (<div className="App"><Route path="/home" component={Home}/><Route path="/goods" component={Goods}/><Route path="/about" component={About}/><Route path="/" component={Home}/></div>);
}

示例代码说明:

示例的本意是希望/home和/路径都展示首页组件,/表示默认打开显示首页
但是示例真实的情况是,无论/home,/goods,/about路径,最后一个/Route都会展示
这样就导致了页面会同时渲染两个组件,

3.3.2 Switch组件

Switch组件说明:

Switch组件用于包裹Route组件, 表示只会渲染第一个与路径配置成功的Route组件对应的内容
如果有两个组件都匹配路径都成功,也只会显示第一个,
或者显示Redirect重定向组件内容
也就是说路径只会匹配到第一个成功的Route就不会在下匹配其他Route组件了,
如果不使用Switch组件,则会将所有Route组件都匹配一下,所有匹配成功的组件都会展示

示例代码如下

import {Route, Link,Switch} from 'react-router-dom'
import Home from "./components/Home"
import Goods from "./components/Goods"
import About from "./components/About"function App() {return (<div className="App"><Switch><Route path="/home" component={Home}/><Route path="/goods" component={Goods}/><Route path="/about" component={About}/><Route path="/" component={Home}/></Switch></div>);
}

示例说明:

这样就解决了之前存在的问题
当路由为/时匹配最后一个Route,因此展示首页
如果当路由匹配到/goods,展示商品页,此时会中断匹配, 也就不会匹配到/,此时也不会再次展示一个首页组件

3.4 导航组件

3.4.1 导航组件说明:

导航组件的作用是用来点击跳转路由,为Link和NavLink
Link组件和NavLink组件的区别在于时候会添加额外的类名
Link组件在跳转路由时,当前活跃的导航不会添加任何类名
NavLink跳转路由,会给当前活跃的导航添加额外的类名,可以利用类名添加不同的样式

3.4.2 Link组件的使用

Link组件有一个to属性, 有来指定跳转到那个路由

示例代码如下:

import {Route, Link,Switch} from 'react-router-dom'import Home from "./components/Home"
import Goods from "./components/Goods"
import About from "./components/About"function App() {return (<div className="App"><Link to="/home">首页</Link><Link to="/goods">商品页</Link><Link to="/about">关于页</Link><Switch><Route path="/home" component={Home}/><Route path="/goods" component={Goods}/><Route path="/about" component={About}/><Route path="/" component={Home}/></Switch></div>);
}

示例说明:

Link标签会被编译为a标签
to属性表示当你点击时,跳转到那个路由上
但是不会添加任何额外的类名

控制台Elements里展示的内容

<div class="App"><a href="#/home">首页</a><a href="#/goods">商品页</a><a href="#/about">关于页</a><div>这是首页</div>
</div>

因此没发确定当前那个导航对应的路由是活跃状态

3.4.3 NavLink 组件的使用

NavLink会给当前活跃的路径导航添加额外的类名, 利用添加给导航添加不同的样式

因此NavLink组件使用相对较多

示例代码:

import {Route, NavLink,Switch} from 'react-router-dom'import Home from "./components/Home"
import Goods from "./components/Goods"
import About from "./components/About"function App() {return (<div className="App"><NavLink to="/home">首页</NavLink><NavLink to="/goods">商品页</NavLink><NavLink to="/about">关于页</NavLink><Switch><Route path="/home" component={Home}/><Route path="/goods" component={Goods}/><Route path="/about" component={About}/><Route path="/" component={Home}/></Switch></div>);
}

示例显示后的Elements结果

<div class="App"><a href="#/home">首页</a><a href="#/goods" aria-current="page" class="active">商品页</a><a href="#/about">关于页</a><div>商品页面</div>
</div>

此时会发现,当前展示的是商品页面, 对应的导航会有一个额外的类名activ

因此可以利用active给当前显示的导航添加不同的样式

.active{color:red;
}

3.5 路由重定向组件的使用

路由重定向 Redirect 组件使用说明

Redirect组件可以在所有路由都匹配不成功后,默认跳转展示的内容,如访问的路由不存在,展示首页
Redirect组件也可以在路由匹配成功后,验证权限, 不足的跳转指定路由, 如登录账号不存在跳转注册

示例代码:

import {Route, NavLink,Switch,Redirect} from 'react-router-dom'import Home from "./components/Home"
import Goods from "./components/Goods"
import About from "./components/About"function App() {return (<div className="App"><NavLink to="/home">首页</NavLink><NavLink to="/goods">商品页</NavLink><NavLink to="/about">关于页</NavLink><Switch><Route path="/home" component={Home}/><Route path="/goods" component={Goods}/><Route path="/about" component={About}/><Route path="/" component={Home}/>{/* 使用路由重定向, 当路由匹配不成功时,显示首页 */}<Redirect to="/home" /></Switch></div>);
}

3.6 withRouter组件的使用

3.6.1 withRouter组建了解

withRouter为高阶组件,其实就是一个函数,参数是一个组件, 返回值也是一个组件
正常的路由组件都能在props属性接受和路由有关的match,location,history对象
如果是非路由组件不能在props属性中获取这些路由对象,如果需要在非路由组件中使用路由对象内容
就需要给非路由组件嵌套一个WitchRouter高级组件,

因为WitchRouter组件就是为了让非路由组件也能访问路由对象的高阶组件

3.6.2 未使用withRouter

非路由组件中获取props

export default class Header extends Component {render() {console.log(this.props);/*打印结果:{}*/return (<h2>应用的头部</h2>);}
}

路由组件中获取props

export default class Home extends Component {render() {console.log(this.props);/*打印结果:{history: {...},location:{...},match:{...},}*/return (<div>这是首页</div>);}
}

3.6.3 使用withRouter

使用withRouter执行,传入非路由组件

import React, { Component } from 'react';// 引入高级组件
import { withRouter } from 'react-router-dom'
class Header extends Component {render() {console.log(this.props);/*打印结果:{history: {...},location:{...},match:{...},}*/return (<h2>应用的头部</h2>);}
}/*使用高级组件, withRouter的参数是Header组件,返回一个处理后的组件
*/
export default withRouter(Header)

此时非路由组建的props属性中就可以获取到路由组件才能获取到的history,math,location对象