react-router 4 的使用

Posted 2020-10-23 guashi

 

一、安装 react-router 4

cnpm i react-router-dom --save

 

二、项目中导入react-router-dom 模块

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

1. HashRouter 表示一个路由的根容器，以后所有路由相关的内容，都需要包裹在 HashRouter 内部，整个网站中，只需要使用一次 HashRouter 就可以

2. Route 表示一个路由规则，它有两个重要的属性： path 与 component

3. Link 表示一个路由链接，link 中有一个 to 属性，代表以后要跳转的路径。

 

三、基础测试Demo:

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>
    }
}