一、安装
npm i react-router-dom@5.0
安装react5.0版本
二、导入
import{HashRouter as Router,Route,NavLink,Redirect,Switch} from 'react-router-dom'
-
导入路由相关的组件
-
HashRouter哈希路由 as起别名 router路由
-
router 存放路由的容器
-
Navlink 导航链接
三、一般路由使用
大家可以尝试一下哦!可以看看和vue路由的区别
四、路由的传参
import{HashRouter as Router,Route,NavLink,Redirect,Switch} from 'react-router-dom'
function App(){
return (
<Router>
{/*导航部分*/}
<div className='nav'>
<NavLink to="/" exact>首页</NavLink> |
<NavLink to="/about">关于页面</NavLink> |
<NavLink to="/details/abc">abc详情</NavLink> |
<NavLink to="/details/123">123详情</NavLink> |
</div>
<div className='views'>
<Route path='/' component={Home} exact></Route>
<Route path='/about' component={About}></Route>
<Route path='/details/:id' component={Details}></Route>
</div>
</Router>);
}
export default App;
//创建详情页
function Details({match,location}){
return (<div>
<h1>详情内容</h1>
<p>参数:{match.params.id}</p>
<p>match:{JSON.stringify(match)}</p>
<p>location:{JSON.stringify(location)}</p>
</div>);
五、子路由
<NavLink to="/admin/dash">
<Route path="/admin/dash" component={Dash}>
六、404页面
当无其他匹配页面时就显示404页面
<Switch>
<Route path="/" component={Home} exact></Route>
<Route path="/about" component={About}></Route>
{/*匹配任意路径*/}
<Route path="*" component={NoMatch}></Route>
</Switch>
//404页面
function NoMatch({ location }) {
return (<div>
<h3>404</h3>
<p>当前地址找不到:{location.pathname}</p>
<NavLink to="/">首页</NavLink>
</div>)
}
七、路由守卫
function Login({location,history}){
function logIt(){
// 存储到本地
localStorage.setItem("isLog",true);
// 获取redirect信息
var redirect = location.state.redirect||"/";
// 如果没有拿到就跳转到首页
history.push(redirect);
}
return<div>
<h1>登录</h1>
<button onClick={logIt}>登录</button>
</div>
}