react全家桶之router（一）基本使用

react-router包含3个库，react-router、eact-router-dom(在浏览器中使用)和react-router-native（在rn中使用）。react-router提供最基本的路由功能。react-router-dom和
react-router-native都依赖react-router，所以在安装时，react-router也会⾃动安装
安装：
npm install react-router-dom --save
基本使用
react-router中奉行一切皆组件的思想，路由-Router、链接-Link、路由-Route、独占Switch、重定向-Redirect都以组件形式存在
Router渲染优先级：children>component>render
1、创建项目:
create-react-app my-router
2、新建：pages/RouterPage.js
1）路由基本使用
2）动态路由及获取参数方法
3）路由嵌套
4）404页面
注：404的路由要放在最后，并且用Switch包裹，表示仅匹配一次

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

export function HomPage() {
    return <div>HomPage</div>
}
export function UserPage() {
    return <div>UserPage</div>
}
// 路由嵌套
export function SearchPage(props) {
    const { id } = props.match.params;
    console.log('props', props)
    return <div>
        SearchPage
      <div>
            <Link to={"/detail/" + id}>详情</Link>
        </div>
    </div>
}
export function DetailPage() {
    return <div>DetailPage</div>
}

export default class RouterPage extends Component {
    render() {
        const searchId = "1"
        return (
            <div>
                <h1>RouterPage</h1>
                <BrowserRouter>
                    <nav>
                        <Link to="/">首页</Link>
                        <Link to="/user">用户中心</Link>
                        <Link to={"/search/" + searchId}>搜索</Link>
                        <Link to="/nopage">不存在</Link>
                    </nav>
                    {/* switch表示仅匹配第一个 */}
                    <Switch>
                        {/* 根路由添加exacte，实现精确匹配 */}
                        <Route exact path="/" component={HomPage} />
                        <Route path="/user" component={UserPage} />
                        {/* 动态路由 */}
                        <Route path="/search/:id" component={SearchPage} />
                        <Route path="/detail/:id" component={DetailPage} />
                        <Route component={() => <h1>404</h1>} />
                    </Switch>
                </BrowserRouter>
            </div>
        )
    }
}