React中路由使用

安装router 官方文档

npm install react-router-dom --save

引入router
精确匹配路由 exact

// Link 相当于a标签
import {BrowserRouter as Router, Route, Link} from 'react-router-dom';
import Index from './pages/index';
import List from './pages/list'
import Home from './pages/Home';

function AppRouter(){
    return(
        <Router>
            <ul>
                <li>
                    <Link to='/'>首页</Link>
                </li>
            </ul>
            {/* 精确匹配路由 exact */}
            <Route path='/' exact component={Index}></Route>
            <Route path='/list' component={List}></Route>
            <Route path='/home/' component={Home}></Route>
        </Router>
    )
}
export default AppRouter;

路由重定向

import {Link,Redirect} from 'react-router-dom';
 
   
function Index(props) {
	// 编程式重定向,在组件加载时进行重新
	  this.props.history.push("/home/")
	return {
		<div>
			/* Redirect标签重定向 */
			<Redirect to='/home/'></Redirect
		</div>
	}
}
export default Index()

传参

 const queryDate = {
        pathname: '/Ticket', // 路由路径
        date: new Date() // 参数
    }
    // 第一种
    <Link to={queryDate}>传参到ticket页面</Link>
     // 第二种
    <Link  to={`/Ticket/date:${new Date()}`}  > 第二种传参方式</Link>