【React学习笔记】从0开始——05React路由

这是前面四篇：
【React学习笔记】从0开始——01基本使用
【React学习笔记】从0开始——02组件基础
【React学习笔记】从0开始——03React组件进阶
【React学习笔记】从0开始——04React原理
后面就开始项目实战啦！！！

0、学习目标

• React路由的作用
• react-router-dom的基本使用
• 使用编程式导航跳转路由
• 路由的匹配模式

1、Route路由和使用

前端路由：为了有效的使用单个页面管理多页面的功能，让用户从一个视图（页面）导航到另一个视图（页面）。前端路由是一套映射规则，是URL路径和组件的对应关系。

1.1使用步骤：

• 安装

npm add react-router-dom

• 导入路由的三个核心组件：Router/Route/Link

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

• 使用Router组件包裹整个应用（只需要使用一次）

<Router>
	...
</Router>

• 使用Link组件作为导航菜单（路由的入口），使用Route组件作为导航菜单（路由的出口）

const First = () =>{
	<p>页面一的内容</p>
}
//路由入口 Link组件：用于指定导航链接
<Link to="/first">页面一</Link>
//路由出口：展示匹配路径的内容  Route组件展示组件相关信息 path:路由规则  component：展示的组件 
<Route path="/first" component={First}></Route>

1.2 两种常见的Router

HashRouter 和 BrowerRouter，HashRouter使用URL的哈希值实现（localhost:3000/#/first）
BrowerRouter（推荐），使用H5的historyAPI实现

import {HashRouter as Router, Route, Link} from 'react-router-dom'

Link组件：用于指定导航链接

2、路由的执行过程

• 点击Link组件，修改浏览器地址栏中的url
• React路由监听地址栏URL的变化
• React路由遍历内部所以的Route组件，使用路由规则（path）和pathName（/first）进行匹配
• 当路由规则（path）能匹配地址栏中的pathName时，就展示该Route组件的内容

3、编程式导航

History由React路由提供，用于获取浏览器历史记录的相关信息
Push(path)：跳转到某个页面，参数path表示要跳转的路径
go(N):前进或者后退到某个页面，参数n表示前进或后退页面的数量

import React from 'React '
import ReactDOM from 'ReactDOM '
import {BrowserRouter as Router, Route, Link} from 'react-router-dom'


class Login extends React.Component {
	handleLogin = () => {
		this.props.history.push('/home')
	}
	render() {
		return (
			<div>
					<p>登录页面</p>
					<button onClick={this.handleLogin}>登录</button>
			</div>
		)
	}
}

const Home = (props)=> {
	const handleBack = () =>{
	//返回上一页
		props.history.go(-1)
	}
	return (
			<div>
					<p>我是首页</p>
					<button onClick={handleBack}>返回</button>
			</div>
	)

}
const App =() =>(
	<Router>
			<div>
					<p>编程式导航：</p>
					<Lin. cv v k to="/login">点击跳转去登录</Link>
					<Route path="/login" component={Login}></Route>
					<Route path="/home" component={Home}></Route>
			</div>
	</Router>
)

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

默认路由

进入页面时默认展示
默认路由：表示进入页面就会匹配的路由
默认路由Path:/

<Route path="/" component={Home}></Route>

4、匹配模式

4.1 模糊匹配模式

path：代表Route组件的Path属性
pathname：代表Link组件的to属性
只要pathname 以path开头的就会匹配成功

path	能够匹配的pathname
/	所有的pathname
/first	/first/a 或/first或/first/a/b

4.2 精确匹配模式

如果采用模糊匹配模式，默认路由在任何情况下都会被展示。
给Route组件添加exact属性，就可以变成精确匹配模式
精确匹配：只要当path和pathname完全匹配时才会展示该路由

<Route exact path="/" component={Home}></Route>