打开cmd
在项目文件夹安装:npm i react-router-dom@5.0 -S(指定5.0版本)
在app.js中添加路由,导入
import {
HashRouter as Router, //HashRouter哈希路由 as起别名 router路由
Route, //Route 存放路由的容器
NavLink, //navlink 导航链接
Redirect, // Redirect 重定向
Switch, // Switch一次匹配一个页面
} from "react-router-dom";
首页页面:
//创建首页
function Home(){
return (<div>
<h1>首页内容</h1>
</div>);
}
export default Home;
分支路由页面:
function About(){
return (<div>
<h1>关于页面内容</h1>
</div>);
}
export default About;
在需要的页面配置:
import {
HashRouter as Router,
Route,
NavLink
} from "react-router-dom";
import Home from "./Home";
import About "./About";
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;
//导入路由相关的组件
//HashRouter哈希路由 as起别名 router路由
//router 存放路由的容器
//Navlink 导航链接
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>);
父路由是普通路由,在父组件中配置子路由
在子路由中配置重定向Redirect,可控制子路由默认显示页面
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>
);
}
匹配任意地址,将404页面放在最后,并在外层加上 组件控制只匹配一个页面。当无其他匹配页面时就显示404页面
<div className="views">
<Switch>
<Route path="/" component={Home} exact></Route>
<Route path="/about" component={About}></Route>
<Route path="/details/:id" component={Details}></Route>
<Route path="/admin" component={Admin}></Route>
<Route path="*" component={NoMatch}></Route>
</Switch>
</div>
创建一个登录页面、添加Priviate权限页面
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>
}