1.安装React Router

npm install --save react-router-dom

2.新建路由跳转测试页面 AppRouter.js

import React from "react";

import { BrowserRouter as Router, Route, Link } from "react-router-dom";

function Index() {

 return <h2>JSPang.com</h2>;

}

function List() {

 return <h2>List-Page</h2>;

}

function AppRouter() {

 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 AppRouter;

注释：exact 精准匹配

3. 使用路由页面src文件目录下的index.js

import React from 'react';

import ReactDOM from 'react-dom'

import  AppRouter from './AppRouter'

ReactDOM.render(<AppRouter/>,document.getElementById('root'))

4. 路由传值

1.传值

<li><Link to="/list/123">列表</Link> </li>

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

2.接收

componentDidMount(){

      //注释 参数获取：this.props.match.params.参数

      let tempId=this.props.match.params.id

       this.setState({id:tempId })

}

5.路由重定向

1.标签式路由重定向

import { Redirect } from 'react-router-dom' 

 render() {

        return (

            <div>

                <Redirect to='/home/'></Redirect> //                  <h1>列表{this.state.id}</h1>

            </div>

        )

}

注释：Redirect 路由重定向标签此处跳转进来就重定向去home页面

2.编程式路由重定向

constructor生命周期中使用 ：

this.props.history.push('/home/')