安装
安装版本为5.0
npm i [email protected] -S
导入路由相关组件
import {
HashRouter as Router,//HashRouter哈希路由 as起别名 router路由
Route,//router 存放路由的容器
NavLink,//navlink 导航链接
Redirect,// Redirect 重定向
Switch,// Switch一次匹配一个页面
} from "react-router-dom";
路由案例
1.普通路由
import {
HashRouter as Router,
Route,
NavLink
} from "react-router-dom";
function App() {
return (
<Router>
<div className="nav">
<NavLink to="/" exact>首页</NavLink>|
<NavLink to="/about">关于</NavLink>
</div>
<div className="views">
<Route path="/" component={Home} exact></Route>
<Route path="/about" component={About}></Route>
</div>
</Router>
);
}
export default App;
function Home() {
return (
<div>
<h1>首页</h1>
</div>
);
}
function About() {
return (
<div>
<h1>关于页面</h1>
</div>
);
}
运行结果:
2.路由传参
import { HashRouter as Router, Route, NavLink } from 'react-router-dom'
function App() {
return (<Router>
<NavLink to="/details/abc">参数abc</NavLink> |
<NavLink to="/details/123">参数123</NavLink> |
<Route path="/details/:id" component={Details}></Route>
</Router>);
}
export default App;
function Details({ match, location }) {
return (<div>
<h1>路由传参</h1>
<p>参数:{match.params.id}</p>
</div>);
}
3.子路由
function Admin() {
return (
<div>
<h1>Admin页面</h1>
<p>
<NavLink to="/admin/dash">概述</NavLink>
<NavLink to="/admin/orderlist">订单列表</NavLink>
</p>
<Route path="/admin/dash" component={Dash}></Route>
<Route path="/admin/orderlist" component={OrderList}></Route>
<Redirect from="/admin" to="/admin/dash"></Redirect>
</div>
);
}
4.路由守卫
// 把props.chilren 解构诶children ...rest 剩余的其他参数
function Private({ children, ...rest }) {
// 把Private组件的参数除了children全部转移到Route组件
// Route不直接指定component通过render渲染出来
return (
<Route
{...rest}
render={({ location }) => {
return localStorage.getItem("isLog") ? (
children
) : (
<Redirect
to={
{ pathname: "/login", state: { redirect: location.pathname } }}
></Redirect>
);
}}
></Route>
);
}
使用时,给要守卫的页面添加父组件<Priviate>
<Priviate path="/admin">
<Admin></Admin>
</Priviate>
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>)
}
效果如下:
欲知后事如何,请听下回分解. . . . . .