安裝

npm install --save react-router-dom
yarn add react-router-dom -S

基本使用

react-rouer中奉行一切皆組件的思想，路由器Router，鏈接Link,路由Route,獨占Switch，重定向Redirect都以組件形式存在。

BrowserRouter

src/pages/RouterPage.js

import React, { Component } from 'react'
import {BrowserRouter,Link,Route,Switch} from "react-router-dom";
import HomePage from "./HomePage"
import UserPage from "./UserPage"
export default class RouterPage extends Component {
    render() {
        const id = 123
        return (
            <div>
                <BrowserRouter>
                    <Link to='/'>首頁</Link>
                    <Link to='/user'>用戶中心</Link>
                    {/* 動態(tài)路由 */}
                    <Link to={'/search/' + id}>搜索</Link>
                    <Link to='/aaa'>不知道的頁面</Link>
                    {/* 獨占路由 從上到下匹配 匹配一個就返回 404寫在最后 */}
                    <Switch>
                    {/* component children render只會顯示一個 優(yōu)先級最高是children 然后是component */}
                    {/* exact 準(zhǔn)確匹配 嚴格匹配 */}
                    <Route exact path="/" 
                    component={HomePage}
                    children={()=><div>haha</div>}
                    render={()=><div>1122</div>}
                    >
                    </Route>
                    <Route path="/user" component={UserPage}></Route>
                    <Route path="/search/:id" component={Search}></Route>
                    <Route component={()=><div>404</div>}></Route>
                    </Switch>
                </BrowserRouter>
            </div>
        )
    }
}

// 嵌套路由
function Search(props){
    console.log(props);
    const {id} = props.match.params;
    return (
        <div>Search:{id}
        <Link to="/search/detail">{id}詳情</Link>
        {/* 子路由寫組件里 */}
        <Route path="/search/detail" component={Detail}></Route>
        </div>
    )
}

function Detail(props){
    return <div>Detail</div>;
}

src/pages/HomePage.js

import React, { Component } from 'react'

export default class HomePage extends Component {
    render() {
        return (
            <div>
                <h1>HomePage</h1>
            </div>
        )
    }
}

src/pages/UserPage.js

import React, { Component } from 'react'

export default class UserPage extends Component {
    render() {
        return (
            <div>
                <h1>UserPage</h1>
            </div>
        )
    }
}