React-Router

安装 npm i react-router-dom

Router 渲染内容三种方式

• children:func 优先级最高，不管location是否匹配，都会渲染
• component 优先级次之
• render:func *优先级最低

src\page\RouterPage.js

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

export default class RouterPage extends Component {
    render() {
        return (
            <div>
                <h3>RouterPage</h3>

                <Router>
                    <Link to="/">首页</Link>
                    <Link to="/user">用户中心</Link>


                    <Switch>
                        {/* exact 实现精确匹配 */}
                        <Route exact
                            path="/"
                            component={Home}  // 2
                        // children={() => <div>children</div>} // 1
                        // render={() => <div>render</div>} // 3
                        />

                        <Route
                            path="/user"
                            component={User} />

                        <Route
                            component={Empty} />
                    </Switch>

                </Router>
            </div>
        )
    }
}


function Home() {
    return <div>
        <h3>Home Page</h3>
    </div>
}

function User(params) {
    return <div>
        <h3>User Page</h3>
    </div>
}

function Empty(params) {
    return <div>
        <h3>Empty Page</h3>
    </div>
}