React中路由的配置，基于react-router-dom实现路由管理

基于react-router-dom ，实现react中路由的跳转

既然是基于react-router-dom实现的路由，那么我们第一步当然是下载react-router-dom啦

npm i react-router-dom -s

基本概念

我们先讲几个我们要用到的存在于react-router-dom包中几个基本的方法，{ BrowserRouter, Route,Switch,Redirect}

1、第一个BrowserRouter就是总的路由管理了，他是说明，内部的路由的跳转，都是基于浏览器的history模式进行跳转的，是路由的最外层

2、Route，这个就是实际的单个路由了，指明了路由的path，路由对于的组件，以及匹配模式等，

3、Switch，这个就是开关的意思，也就是说，由上到下匹配，当匹配成功一个后就会停止当前匹配，防止出现一次匹配多个路由

4、Redirect，这个字面意思就是重定向，也就是说这个是我们所用的路由重定向的功能，当该Redirect以上的Route没有匹配成功时，就会执行这行代码，以决定是否进行重定向

现在我们开始使用吧！

import React from 'react';
import './App.css';
import './assets/font/iconfont.css'
import {
       BrowserRouter, Route,Switch,Redirect } from "react-router-dom"
import Home from './views/Home';
import TextView from './views/TextView';
class App extends React.Component{
     
  render() {
     
    return (
        <BrowserRouter>
        	<Switch>
        		<Redirect exact from='/' to='/Home'></Redirect>
          		<Route exact  path='/Home' component={
     Home}></Route>
          		<Route exact  path='/TextView' component={
     TextView}></Route>
          	</Switch>
        </BrowserRouter>
    )
  }
}

exact： 另外我们看到，每个Route上都写了exact属性，这个属性就是我们说的匹配的标准，这个exact说的就是精准匹配的意思，就是例如我们的path=’/Home’ 不会跳转到 path=’/’ ，如果进一步，加一个strict，就变成了完美匹配 这样当你的路径写成 ‘/Home/’ ，这样也不会跳转到’/Home’
一般的我们只需要精准匹配就足够了，人生嘛，哪有那么多完美

Redirect：我们再来看看 这行代码

<Redirect exact from='/' to='/Home'></Redirect>

这句话的意思是，当你路由匹配到了‘/’时，就会重定向到‘/Home’路径，前面的from就是相当于Route 的path，只要匹配到了from里面的路由就会进行重定向，我们要注意，路由的匹配是从上到下的，不要被截胡了哦

404页面

当所有路由都不匹配时，我们应当向客户展示404页面，也就是告诉客户访问的页面有误，
观察路由的匹配逻辑，我们只需要在路由的最后添加一个能够匹配当前的错误路由的一个自定义路由，并展示自定义界面

<Switch>
        		<Redirect exact from='/' to='/Home'></Redirect>
          		<Route exact  path='/Home' component={
     Home}></Route>
          		<Route exact  path='/TextView' component={
     TextView}></Route>
          		<Route  component={
     Erro}></Route> //错误页面
          	</Switch>

Component 可以通过render返回一个函数进行代替
例如：

<Route  render = {
     ()=>(<div>404页面</div>)}></Route> 

这样就会显得十分的方便，避免了重写一个组件或者一个页面

{Link ，NavLink }

这两个，就是跳转路由的快捷方式，也就是link方式，其实就是一个封装好的a标签，区别在于，前面的 Link 只是单纯的link，而后者这能够起到高亮的作用，这在我们做导航条高亮时显得十分的重要

NavLink

当NavLink 所连接的路由已经渲染了，则会有高亮效果，效果的添加有两种方式：
一种是为高亮的链接添加自定义className，当高亮时，就会为这个a标签添加该属性，我们只要在css里面为这个className添加样式即可

<NavLink activeClassName='lalal' to='/erro'>

另一种则是是直接在高亮的link上添加 activeStyle

<NavLink 
	activeStyle={
     {
     
    fontWeight: "bold",
    color: "red"
  }}
 to='/erro'>

{Link ，NavLink }使用方法：
只需要引入 Link 或者NavLink就行

import {
     Link} from "react-router-dom"
import React from 'react';
class Home extends React.Component{
     
	render(){
     
		return (
			<div>
				<Link to='/NextViews' >
			</div>
		)
	}
}

编程式导航

前面那种 Link 的只能是用户点击去调转点击的那个路由，有些时候我们需要在事件中去跳转路由，这就是编程式跳转
本次编程式跳转使用的是浏览器history模式跳转
当你在路由的根组件进行跳转时，只要直接使用 this.props.history.pusu(‘path’)，就能实现跳转，这是因为在跳转时，根组件会接收到一个history属性，这样就能跳转，问题就来了，这种传递只有根组件能接受的到，子组件是无法收到history属性的，笨方法是在根组件往下传递props，但这样过于繁琐，老话一句，有失风采
这个时候，就得得用 react-router-dom中的一个好方法了

{withRouter}

我们只需要在，使用编程式跳转的子组件中使用该方法（他也是个高阶组件），无论你是一层的组件，还是往里一百层的组件，都能访问到根组件的history属性

使用方法：

import {
     withRouter} from "react-router-dom"
import React from 'react';
class HomeSon extends React.Component{
     
	pathChang=()=>{
     
		this.props.history.push('path')
	}
	render(){
     
		return (
			<div>
				<button onClick={
     this.pathChang}>点我跳转</button>
			</div>
		)
		
	}
}
export default withRouter(HomeSon);  //注意要写高阶组件哦

这样我们的跳转问题就解决啦

参数传递

第一种：params
首先你在你的Route里面这样配置

<Route exact  path='/TextView/:id' component={
     TextView}>

跳转时路由带参：

this.props.history.push('/TextView/123')

在使用参数的组件写：

this.props.match.params.id   //1

第二种：query
不需要对路由进行其他配置

跳转时路由带参：

this.history.push('/TextView/?page=1')

this.props.match.params.id   //?page=1

得到的 ?page=1 并不是我们想要的格式
因此借助工具 query-string

import qs from 'query-string';

这样我们就能得到想要的结果了

qs.parse(this.props.location.search).page //1

路由嵌套

嵌套路由就是，跟Vue的router-view一个意思，路由中显示子路由，使用场景很多，例如商品和评价，这两个就是同级路由，都需要在店家中同时显示，这时就要用到路由嵌套了
例子 父级路由 Home，两个自己路由 /Home/TextView 和 /Home/Next

路由配置：

import React from 'react';
import './App.css';
import './assets/font/iconfont.css'
import {
       BrowserRouter, Route,Switch,Redirect } from "react-router-dom"
import Home from './views/Home';
import TextView from './views/TextView';
import TextView from './views/Next';
class App extends React.Component{
     
  render() {
     
    return (
        <BrowserRouter>
        	<Switch>
        		<Redirect exact from='/' to='/Home'></Redirect>
          		<Home exact path='/Home'>
          			<Redirect exact from='/Home' to="/Home/TextView" />
          			<Route exact  path='/Home/TextView' component={
     TextView}></Route>
          			<Route exact  path='/Home/Next' component={
     Next}></Route>
          		</Home>
          		
          	</Switch>
        </BrowserRouter>
    )
  }
}

Home.js

import {
     Link} from "react-router-dom"
import React from 'react';
class Home extends React.Component{
     
	render(){
     
		return (
			<div>
				<Link to='/Home/TextView' >
				<Link to='/Home/Next' >
				{
     this.props.children}
			</div>
		)
	}
}

这样就大功告成啦
并且默认加载第一个子路由 /Home/TextView

这一讲就先到这啦，有问题欢迎留言哦