react - router

是基于React强大的路由库，它可以让你向应用中快速地添加视图和数据流，同时保持页面与URL间的同步。

1. 引入路由文件及配置

exact为精确匹配文件的路径

import React from "react";
import { Router, Route, Link } from "react-router-dom";
import Index from './Pages/Index'
import List from './Pages/TableList'

function AddRouter() {
  return (
    <Router>
        <ul>
            <li> <Link to="/">首页</Link> </li>
            <li><Link to="/list/">列表</Link> </li>
        </ul>
        <Route path="/" exact component={Index} />
        <Route path="/list/" component={List} />
    </Router>
  );
}

export default AddRouter;

2. 路由动态传值

<Route path="/list/:id" component={List} />

然后在浏览器的控制台中可以看到打印出的对象，对象包括三个部分:

patch:自己定义的路由规则，可以清楚的看到是可以产地id参数的。 url: 真实的访问路径，这上面可以清楚的看到传递过来的参数是什么。
params：传递过来的参数，key和value值。

3. 标签式重定向

import { Link , Redirect } from "react-router-dom";
import List from './Pages/TableList'

<Redirect to="/list/" />