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/')
