React Router的使用

1. 安装

react router有多个版本的包，在web应用使用的是react-router-dom

npm install react-router-dom --save

2. 使用

2.0 准备

在src\index.js中引入router，并在最外层组件套用Router即可（Router只需要引用一次）

import React from 'react'
import { render } from 'react-dom'
//将Router重命名是为了好切换BrowserRouter与HashRouter
//import { HashRouter as Router } from 'react-router-dom'
import { BrowserRouter as Router } from 'react-router-dom'

import App from './App'

render(
    <Router>
        <App/>
    </Router>,
    document.querySelector('#root')
)

2.1 Route

在需要路由的组件包一层<Route>组件

• $\color{red}{*}$ path属性为路由

• component是相关组件，即可实现路由功能

• render类似component，可以在里面返回组件或dom来进行渲染，与component是互斥的

  render可以在使用时传递参数，但是component不可以

render() {
        return (
            <div>
                <ul>
                    <li>首页</li>
                    <li>文章</li>
                    <li>用户</li>
                </ul>
                <Route path="/render" render={()=><div>render</div>}/>
                <Route component={Home} path="/home" />
                <Route component={Article} path="/article" />
                <Route component={Users} path="/users" />
                
            </div>
        )
    }

这样在Url中使用路由就可以渲染对应部分

eg:

localhost:3000/home

因为render可以传入参数，所以可以进行状态判断来进行不同的渲染，比如说登录判断

compoent用于没有参数的渲染

2.2 Link

在需要跳转的组件包一层<Link>组件，to属性为跳转的路由，即可实现跳转

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

import {
    Home,
    Article,
    Users
} from './views'

export default class App extends Component {
    render() {
        return (
            <div>
                <ul>
                    <li><Link to="/home">首页</Link></li>
                    <li><Link to="/article">文章</Link></li>
                    <li><Link to="/users">用户</Link></li>
                </ul>
                <Route component={Home} path="/home" />
                <Route component={Article} path="/article" />
                <Route component={Users} path="/users" />
            </div>
        )
    }
}

eg: 给<li>标签的内容添加跳转

除了Link组件，还有NavLink组件

2.3 Redirect

可以将路由重定向，有from和to属性。常用于路由不匹配时跳转主页

eg:

<Redirect from="/*" to="home" />

2.4 Switch

<Switch>组件会将多个Route包起来，像switch语法一样，跳转第一个匹配的路由，常配合<Redirect>使用

eg：

<Switch>
    <Route component={Home} path="/home" />
    <Route component={Article} path="/article" />
    <Route component={Users} path="/users" />
    <Redirect from="/" to="home" />
</Switch>

但是<Switch>的匹配路径不是完全匹配，而是模糊匹配，如果想要使用精确匹配可以加入exact，常用于路由有包含关系时。

eg:

<Switch>
    <Route component={Home} path="/home" />
    {/*在较短的Route上加入exact可以避免路由Switch拦截问题*/}
    <Route component={Article} path="/article" exact/>
    <Route component={ArticleDetail} path="/article/:id" />
    <Route component={Users} path="/users" />
    <Redirect from="/" to="home" />
</Switch>

2.5 history

使用Router后props中会有很多关于路由的属性，其中包括history

history中有很多方法：

比如：想点击某个button返回首页

 <button onClick={this.goHome}>跳转首页</button>
...
goHome = () => {
    this.props.history.push('/home')
}

同样，push可以传递参数：

 goHome = () => {
        // this.props.history.push('/home')
        this.props.history.push({
            pathname: '/home',
            state:{
                id: this.props.match.params.id
            }
        })
    }
    ren

3. withRouter的使用

组件只有被Router渲染时才可以使用Router的内容，但是如果有的组件是在其他组件内部被渲染的，没有被Router渲染，应该怎么使用？

解决方法： 使用withRouter，withRouter是一个高阶组件，可以使被修饰的组件实现Router的方法

eg: 想在组件内部实现跳转主页

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

@withRouter
class BackHome extends Component {
    handleClick = () => {
        this.props.history.push({
            pathname: '/home',
            state: {
                id: this.props.match.params.id
            }
        })
    }
    render() {
        return (
            <div>
                <button onClick={this.handleClick}>跳转首页</button>
            </div>
        )
    }
}

使用withRouter后，props中有了Router的方法

4. React Router传参的方式

4.1 使用query字符串传参

显示传参方法

{/* 显示传参--article */}
<Link to="/article/1?from=article">Article 1</Link>

路由：/article/1?from=article

参数可以在props.location.search获取

4.2 使用state传参

隐式传参方法，常用于埋点

{/* 隐式传参，常用于埋点 */}
<Link to={{
        pathname:'/article/2',
            state:{
                from:'article'
            }
    }}>Article 2</Link>

路由：/article/2

参数可以在props.location.state获取

4.3 动态路由

 <Route component={ArticleDetail} path="/article/:id"/>

路由：/article/2

参数可以在props.match.params.id获取