React教程第4章：React路由

export default class App extends Component {
	render() {
		return (
			<div>
				<div className="row">
					<div className="col-xs-offset-2 col-xs-8">
						<div className="page-header"><h2>React Router Demo</h2></div>
					</div>
				</div>
				<div className="row">
					<div className="col-xs-2 col-xs-offset-2">
						<div className="list-group">

							{/* 原生html中，靠<a>跳转不同的页面 */}
							{/* <a className="list-group-item" href="./about.html">About</a>
							<a className="list-group-item active" href="./home.html">Home</a> */}

							{/* 在React中靠路由链接实现切换组件--编写路由链接 */}
							<Link className="list-group-item" to="/about">About</Link>
							<Link className="list-group-item" to="/home">Home</Link>
						</div>
					</div>
					<div className="col-xs-6">
						<div className="panel">
							<div className="panel-body">
								{/* 注册路由 */}
								<Route path="/about" component={About}/>
								<Route path="/home" component={Home}/>
							</div>
						</div>
					</div>
				</div>
			</div>
		)
	}
}

//引入react核心库
import React from 'react'
//引入ReactDOM
import ReactDOM from 'react-dom'
//
import {BrowserRouter} from 'react-router-dom'
//引入App
import App from './App'

ReactDOM.render(
	<BrowserRouter>
		<App/>
	</BrowserRouter>,
	document.getElementById('root')
)

路由器类型

BrowserRouter 用路径进行映射组件

HashRouter 用HASH进行映射组件

路由成员

Route 注册路由

Link链接路由

需要路由器包裹Link,Route 由路由器统一管理

路由组件和一般组件

1.写法不同：

一般组件：

路由组件：

2.存放位置不同：

一般组件：components

路由组件：pages

3.接收到的props不同：

一般组件：写组件标签时传递了什么，就能收到什么

路由组件：接收到三个固定的属性history,location,match

路由高亮

NavLink可以实现路由链接的高亮，通过activeClassName指定样式名

<NavLink activeClassName="active" className="list-group-item"/>

高亮路由链接二次封装,不用每次都定义activeClassName和其它样式类

import React, { Component } from 'react'
import {NavLink} from 'react-router-dom'

export default class MyNavLink extends Component {
	render() {
		// console.log(this.props);
		return (
      // 组件标签体内容是一个特殊的标签属性 children
			<NavLink activeClassName="atguigu" className="list-group-item" {...this.props}/>
		)
	}
}

路由的模糊匹配与严格匹配

通常情况下，path和component是一一对应的关系。
Switch可以提高路由匹配效率(单一匹配)
默认使用的是模糊匹配（简单记：【输入的路径】必须包含要【匹配的路径】，且顺序要一致）
开启严格匹配：
严格匹配不要随便开启，需要再开，有些时候开启会导致无法继续匹配二级路由

路由的重定向Redirect的使用

一般写在所有路由注册的最下方，当所有路由都无法匹配时，跳转到Redirect指定的路由

<Switch>
  <Route path="/about" component={About}/>
  <Route path="/home" component={Home}/>
  <Redirect to="/about"/>
</Switch>

嵌套路由

注册子路由时要写上父路由的path值
路由的匹配是按照注册路由的顺序进行的

向路由组件传递参数

params参数

路由链接(携带参数)：<Link to='/demo/test/tom/18'}>详情</Link>

注册路由(声明接收)：<Route path="/demo/test/:name/:age" component={Test}/>

接收参数：this.props.match.params

search参数

路由链接(携带参数)：<Link to='/demo/test?name=tom&age=18'}>详情</Link>

注册路由(无需声明，正常注册即可)：<Route path="/demo/test" component={Test}/>

接收参数：this.props.location.search

备注：获取到的search是urlencoded编码字符串，需要借助querystring解析

state参数antd的按需引入+自定主题

路由链接(携带参数)：<Link to={{pathname:'/demo/test',state:{name:'tom',age:18}}}>详情</Link>

注册路由(无需声明，正常注册即可)：<Route path="/demo/test" component={Test}/>

接收参数：this.props.location.state

备注：刷新也可以保留住参数

编程式路由导航

不用使用路由链接组件,借助withRouter加工普通组件路由方法,在this.props.history对象上的API对操作路由跳转、前进、后退

this.prosp.history.push()
this.prosp.history.replace()
this.props.history.goBack()
this.props.history.goForward()
this.props.history.go()

React教程 第4章：React路由