一、安裝 react-router 4

cnpm i react-router-dom --save

二、項目中導入react-router-dom 模塊

import { HashRouter, Route, Link } from ‘react-router-dom‘

import React from ‘react‘;
import ReactDOM from ‘react-dom‘;
import { HashRouter, Route, Link } from "react-router-dom";

// 導入根組件
import Home from "./components/Home.jsx";
import About from "./components/About.jsx";
import Movie from "./components/Movie.jsx";

export default class App extends React.Component {
    constructor(props){
        super(props);

        
 
this.state = {}
    }

    render() {
        // 使用 HashRouter 把 App 根組件元素包裹起來後，表示網站已經啟動路由
        // 一個網站中，只需使用一次 HashRouter 即可
        return <HashRouter>
            {/* 在一個 HashRouter 中只能有一個根元素*/}
            <div>
                <h1>網站項目根目錄</h1>
                <hr/>
                <Link to="/home">首頁</Link> &nbsp;&nbsp;
                <Link to="/movie">電影</Link> &nbsp;&nbsp;
                <Link to="/about">關於</Link>
                <hr/>
                {/*
 
 
                    Router 創建的標簽，就是路由的規則，
                        path：表示要匹配的路由
                        component 表示當前要展示的子組件
                    Rouer 的作用
                        1、表示一個路由規則
                        2、當作占位符，將來匹配到的組件要放到現在的位置
                */}
                <Route path="/home" component={ Home }></Route>
                <Route path="/movie" component={ Movie }></Route>
                <Route path="/about" component={ About }></Route>
            </div>
            </HashRouter>
    }
}

四、匹配路由參數

return <HashRouter>
            {/* 在一個 HashRouter 中只能有一個根元素*/}
            <div>
                <h1>網站項目根目錄</h1>
                <hr/>
                <Link to="/home">首頁</Link> &nbsp;&nbsp;
                <Link to="/movie/hot/110">電影</Link> &nbsp;&nbsp;
                <Link to="/about">關於</Link>
                <hr/>
　　　　　　　　　　<Route path="/home" component={ Home }></Route>
                {/* 
                    默認情況下，路由中的規則是模糊匹配的。如果匹配成功，就會展示這個路由對應俄組件
                    如果要匹配參數，可以在匹配規則中，使用 : 修飾符，表示這個位置匹配到的是參數
                    如果想讓路由規則精確匹配，需要為為 route 添加 exact 屬性，表示啟動精確匹配
                */}
                <Route path="/movie/:name/:num" component={ Movie } exact></Route>
                <Route path="/about" component={ About }></Route>
            </div>
            </HashRouter>

五、獲取路由參數this.props.match.params.name

import React from ‘react‘;

export default class Movie extends React.Component {
    constructor(props) {
        super(props);
        this.state = {}
    }
    render() {
        return <div>
            {/* 要從路由規則中提取匹配到的參數，可以使用 this.props.match.params.**來訪問 */}
            <h1>電影 - { this.props.match.params.name } - { this.props.match.params.num }</h1>
        </div>
    }
}

react-router 4 的使用