react - router

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/" />