React-router详细介绍及路由配置代码

首先我们要知道单页面应用为什么要有router。

其实简单讲就一句话：
为了不进行后端路由，只进行前端路由

• BrowserRouter --浏览器路由(属于后端路由)
• HasRouter --前端has路由（属于前端路由）

如何使用react-router？

一个单页应用一般只需要一个顶层的Router组件即可，不要再在应用内加Router组件。
比如我们现在顶层的组件是APP.js
那么我们就在APP.js里面这样：
PS:前置要求：已经安装过了react-router-dom,如果没安装请参照 react常用插件安装 进行安装/

import React, { Component } from 'react';
import { 
	BrowserRouter as Router,  //使用as相当于重命名，如果需要从浏览器路由改成HasRouter只需要在这里把BrowserRouter改成HasRouter就可以了，其他地方还是使用Router包着不需要改变
	Switch,		//和js里面的switch语法差不多，这个是用来判断路由地址
    Route,		//用来路由的
    Redirect,	//重定向，用来判断用户输入的地址是否满足条件，不满足就重定向到xxx页面
} from "react-router-dom"; 
export default class RouteComponent extends Component {
	render() {
		return (
			<Router>
				<Switch>	//Switch包在Route的外面，作用是只匹配一个路由
					<Route
						path="/admin"		//只要匹配到的路由包含此path就会走进来
						render={(appProps) => {			//Route渲染组件可以使用也可以使用component，根据实际状况使用
							if (this.props.hasLogin === true) { //如果是已登录的那就返回App组件
								return <App {...appProps} />
							} else {	//如果没有登录就重定向到login页面
								return <Redirect to='/login' />
							}
						}}
					/>
					<Route 
						path='/login'
						component={Login} //在上方需要引入该组件
					/>
					<Route
						path='/404'
						component={NotFound}
					/>,
					<Redirect to='/admin' from='/' exact  />	//exact代表绝对匹配，只有绝对匹配from里面的地址的时候才会重定向到to的页面,使用场景：一般俩个Route组件的path有包含关系的时候，就会在短的这个path上加exact。
					<Redirect to='/404' />	//如果上面的都不符合就重定向到404页面
				</Switch>
			</Router>
		)
	}
}

Route的注意事项：
不应该在同一个route上同时使用component和render渲染，component的优先级要高于render，如果同时使用，render会被忽略

Link组件和NavLink组件

Link组件和NavLink组件也是从react-router-dom引入的。

• Link组件
  < Link to="/home">
• NavLink组件
  < NavLink activeClassName="">
  Link和NavLink的区别就是一个点击的时候进行跳转，另一个点击之后还会额外加一个类名，可以控制样式。
  如果要更改class名的话就用activeClassName=“xxx”

手动跳转页面

this.props.history.push(’./home’)
html5的pushState()可做了解

withRouter --高阶函数/高阶组件

可以给任何组件都注入react-router-dom里的Route组件的一些props
使用方法：
PS：笔者配置了装饰器插件，如果没安装请参照 **react常用插件安装**进行安装

import { withRouter } from 'react-router-dom';
@withRouter
export default Class Test extends Component {
	//你的代码，在这里可以使用this.props.history.push()方法进行路由跳转了
}

HOC --高阶组件 --Higher Order Component
HOF --高阶函数 --Higher Order Function

函数内部返回一个函数就叫高阶函数，返回一个组件就是一个高阶组件

什么是高阶组件？

所谓高阶组件本质上就是一个函数，接收一个组件后返回另外一个新的组件，这么做的意图就是为了增强(enhance)，比如装饰、增添行为、添加逻辑等，都可以放在高阶组件中，高阶组件是一种可以增强组件的能力。
高阶组件一般不可以影响原来的业务。应该在此基础上，在外面增加一些能力，比如在被包裹的组件外围，由一个card的dom元素包裹在一起。