React-路由

React-路由

【1】路由

前端应用大都为SPA(单页应用程序)
有效的使用单个页面来管理原来多页面的功能

让用户从一个视图（页面）导航到另一个视图（页面）
配置路径和组件（配对）

【2】路由使用

（1）安装
	npm install react-router-dom -S
	核心组件：Ruoter，Ruoter,Link
（2）导入
	import {BrowserRouter as Router,Route,Link} from 'react-router-dom'
（3）使用Ruoter组件包裹整个应用（重要）
	<Router>
		<div className="App">
			//页面内容
		</div>
	</Router>
（4）使用Link组件作为导航菜单（路由入口）
	<Link to="/first">页面依</Link>
（5）使用Route组件配置路由规则和要展示的组件（路由出口）
	<Route path="/first" component={First} /> 

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

class First extends React.Component{
    render(){
        return(
            <Router>
                <div>
                    <h1>页面依</h1>
                </div>
            </Router>
        )
    }
}

const RouterTest = ()=>(
    <Router>
        <div>
            <h1>React-Router</h1>
            <Link to="/first">页面依</Link>
            <Route path="/first" component={First} />
        </div>
    </Router>
)

export default RouterTest

【3】常用组件说明

（1）Router组件：包裹整个应用，一个React应用只需要使用一次
	两种常用Router：HasRouter 和 BrowserRouter

	HasRouter:使用Url的哈希值实现（localhost/#/first）
	BrowserRouter:使用H5的historyAPI实现（localhost/first）
（2）Link组件：用于指定导航链接（a标签）
	Link-><a>
	to->href
（3）Route组件：指定路由展示组件相关信息
	path属性：路由规则
	component属性：展示的组件
	Route组件写在哪，渲染出来的组件就展示在哪
	 <Route path="/first" component={First} />

【4】路由的执行过程

Link -> Route -> 组件

（1）点击Link组件（a标签），修改了浏览器地址栏中的url
（2）React路由监听到地址栏url的变化
（3）React路由内部遍历所有Route组件，使用路由规则（path）与pathname进行匹配
（4）当路由规则（path）能够匹配地址栏中的pathname时，就展示该Route组件内容

【5】编程式导航

通过js代码实现页面跳转

class Login extends React.Component{
handleLogin = () =>{
	//...
	this.props.history.push('/home')
}
   render(){
      
   }
}

history是React路由提供的，用于获取浏览器历史记录的相关信息

push(path):跳转到某个页面，参数path表示要跳转的路径
go(n):前进或后退某个页面，参数n表示前进或后退页面数量（比如-1回退到上一页）

（1）./router/Login.js

import {BrowserRouter as Router,Route,Link} from 'react-router-dom'
import React from "react";
import Login from "../views/Login"
import Home from "../views/Home"

class LoginRouter extends React.Component{
    render(){
        return(
            <Router>
                <div>
                    <h1>编程式导航</h1>
                    <Link to="/login">去登录界面</Link>
                    <Route path="/home" component={Home}/>
                    <Route path="/login" component={Login}/>
                </div>
            </Router>
        )
    }
}

export default LoginRouter

（2）../views/Login

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

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

export default Login

（3）../views/Home

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

class Home extends React.Component{
     handleBack = ()=>{
        //返回上一个页面
        this.props.history.go(-1)
    }
    render(){
        return(
            <div>
                <h2>首页</h2>
                <button onClick={this.handleBack} >返回登录页面</button>
            </div>
        )
    }
}

export default Home

（4）index.js

import React from 'react';
import ReactDOM from 'react-dom';
import  LoginRouter from './router/Login'
ReactDOM.render(<LoginRouter />,document.getElementById('root'))

【6】默认路由

进入页面时就会匹配的路由
<Router path="/" component={Home} />
默认路由path为：/

【7】匹配模式

默认情况下React路由是模糊匹配
（1）模糊匹配
	只要pathName以path开头就会匹配成功

	path代表React组件的path属性
	pathName代表Link组件的to属性（也就是location.pathname）

	/:所有pathname
	/first:/first或/first/a或/first/a/b

	注：模糊匹配默认路由也会展示
（2）精确匹配
	给Router组件添加exact属性，让其变为精确匹配模式
	只有当path和pathname完全匹配时才会展示该路由
	<Route exact path="/" component=... />