一、安装react-router-dom并启动项目
二、使用路由
1、导入路由相关组件
//导入路由相关的组件
//HashRouter哈希路由 as起别名 router路由
//router 存放路由的容器
//Navlink 导航链接
import{HashRouter as Router,Route,NavLink,Redirect,Switch} from 'react-router-dom'
function App(){
return (<div>
<h1>路由</h1>
</div>)
}
export default App;
2、创建首页与About页面
//创建首页
function Home(){
return (<div>
<h1>首页内容</h1>
</div>);
}
//创建关于页面
function About(){
return (<div>
<h1>关于页面内容</h1>
</div>);
}
3、配置路由:导航,页面容器
//导入路由相关的组件
//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> |
</div>
<div className='views'>
<Route path='/' component={Home} exact></Route>
<Route path='/about' component={About}></Route>
</div>
</Router>);
}
export default App;
运行结果:
4、创建详情页面(带参数路由)
//导入路由相关的组件
//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(){
return (<div>
<h1>详情页面<h1>
</div>);
}
运行结果:
5、获取参数
//导入路由相关的组件
//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;
//创建详情页
//match 匹配的路由参数 isExact是否精确匹配 params路由的参数
function Details(props){
return (<div>
<h1>详情页面<h1>
<p>参数:{props.match.params.id}</p>
<p>match:{JSON.stringify(props.mach)}</p>
</div>);
}
运行结果:
三、创建子路由
1、创建Admin页面、OrderList、Dash页面
function Admin(){
return <div>
<h1>Admin页面</h1>
</div>
}
function Dash(){
return <div>
<h2>概览页面</h2>
</div>
}
function OrderList(){
return <div>
<h2>订单列表页面</h2>
</div>
}
2、配置Admin页面以及子路由
//导入路由相关的组件
//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> |
<NavLink to="/admin">管理页面</NavLink> |
</div>
<div className='views'>
<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>
</div>
</Router>);
}
export default App;
function Admin(){
return <div>
<h1>Admin页面</h1>
<p>
<NavLink to="/admin/dash">概览</NavLink> |
<NavLink to="/admin/orderlist">订单列表</NavLink>
<Route path="/admin/dash" component={Dash}></Route>
<Route path="/admin/orderlist" component={OrderList}></Route>
</p>
</div>
}
function Dash(){
return <div>
<h2>概览页面</h2>
</div>
}
function OrderList(){
return <div>
<h2>订单列表页面</h2>
</div>
}
//创建详情页
//match 匹配的路由参数 isExact是否精确匹配 params路由的参数
function Details(props){
return (<div>
<h1>详情页面<h1>
<p>参数:{props.match.params.id}</p>
<p>match:{JSON.stringify(props.mach)}</p>
</div>);
}
3、重定向默认页面
//导入路由相关的组件
//HashRouter哈希路由 as起别名 router路由
//router 存放路由的容器
//Navlink 导航链接
import{HashRouter as Router,Route,NavLink,Redirect} 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> |
<NavLink to="/admin">管理页面</NavLink> |
</div>
<div className='views'>
<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>
</div>
</Router>);
}
export default App;
function Admin(){
return <div>
<h1>Admin页面</h1>
<p>
<NavLink to="/admin/dash">概览</NavLink> |
<NavLink to="/admin/orderlist">订单列表</NavLink>
<Route path="/admin/dash" component={Dash}></Route>
<Route path="/admin/orderlist" component={OrderList}></Route>
{/*重定向dash页面*/}
<Redirect from='/admin' to="/admin/dash"></Redirect>
</p>
</div>
}
function Dash(){
return <div>
<h2>概览页面</h2>
</div>
}
function OrderList(){
return <div>
<h2>订单列表页面</h2>
</div>
}
//创建详情页
//match 匹配的路由参数 isExact是否精确匹配 params路由的参数
function Details(props){
return (<div>
<h1>详情页面<h1>
<p>参数:{props.match.params.id}</p>
<p>match:{JSON.stringify(props.mach)}</p>
</div>);
}
运行结果:
四、路由跳转history
//match 匹配的路由参数 path 路径 url 地址
//isExact 是否精确匹配 params 路由的参数
function Home({history}){
return (<div>
<h1>首页内容</h1>
<button onClick={history.goBack}>返回</button>
</div>);
}
//不同NavLink跳转到首页
function About({match,history,location}){
return (<div>
<h1>关于首页内容</h1>
<button onClick={()=>history.push('/')}>首页</button>
<button onClick={()=>history.replace('/')}>首页-replace</button>
<button onClick={()=>console.log(history)}>首页-输出历史记录</button>
</div>);
}
运行结果:
五、location地址栏信息
/创建一个详情页面
function Details({match,location}){
return(<div>
<h1>详情内容</h1>
{/* <p>参数:{props.match.params.id}</p> */}
<p>参数:{match.params.id}</p>
<p>match:{JSON.stringify(match)}</p>
<p>location:{JSON.stringify(location)}</p>
</div>);
}
//match 匹配的路由参数 path 路径 url 地址
//isExact 是否精确匹配 params 路由的参数
//不同NavLink跳转到首页
function About({match,history,location}){
return (<div>
<h1>关于首页内容</h1>
<button onClick={()=>history.push('/')}>首页</button>
<button onClick={()=>history.replace('/')}>首页-replace</button>
<button onClick={()=>console.log(history)}>首页-输出历史记录</button>
<NavLink to={{
pathname:"/details/abc",
search:"name=mumu&age=18",
hash:"good",
state:{redirect:"/about"}
}}>详情ABC</NavLink>
</div>);
}
运行结果:
六、404配置
//导入路由相关的组件
//HashRouter哈希路由 as起别名 router路由
//router 存放路由的容器
//Navlink 导航链接
//Switch一次匹配一个页面
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> |
<NavLink to="/admin">管理页面</NavLink> |
<NavLink to="/login">登录</NavLink> |
</div>
<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> */}
<Private path="/admin">
<Admin></Admin>
</Private>
<Route path="/admin" component={Admin}></Route>
<Route path="/login" component={Login}></Route>
{/* *代表匹配任意路径 */}
<Route path="*" component={NoMatch}></Route>
</Switch>
</div>
</Router>);
}
export default App;
//404页面
function NoMatch({location}){
return(<div>
<h3>404</h3>
<p>当前地址找不到:{location.pathname}</p>
<NavLink to ="/">首页</NavLink>
</div>)
}
运行结果:
八、权限管理
1、创建一个登录页面、添加Priviate权限页面
//导入路由相关的组件
//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> |
<NavLink to="/admin">管理页面</NavLink> |
<NavLink to="/login">登录</NavLink> |
</div>
<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> */}
<Private path="/admin">
<Admin></Admin>
</Private>
<Route path="/admin" component={Admin}></Route>
<Route path="/login" component={Login}></Route>
{/* *代表匹配任意路径 */}
<Route path="*" component={NoMatch}></Route>
</Switch>
</div>
</Router>);
}
export default App;
//把props.chilren 解构为children ...rest 剩余的其他参数
function Private({children,...rest}){
// 把Private组件的参数除了children全部转移到Route组件
// Route不直接指定component通过render渲染出来
return <Route {...rest} render={
({location})=>{
// 如果获取本地存储的isLog得到了(登录了),返回children子节点Admin
// 否则 返回一个Redirect组件
// Redirect 默认跳转到 /login登录页面 传入一个state数据
// redirect自定义值 location.pathname(本地要跳转的地址)
return localStorage.getItem("isLog")?(children):<Redirect to={{pathname:"/login",state:{redirect:location.pathname}}}></Redirect>
}
} ></Route>
}
//登录
function Login({location,history}){
function logIt(){
//存储本地
localStorage.setItem("isLog",true);
//获取redirect信息
// var redirect=location.state.redirect ||"/";
var redirect =location.state && location.state.redirect ? location.state.redirect : '/';
//如果没有拿到就跳转到首页
history.push(redirect);
}
return <div>
<h1>登录</h1>
<button onClick={logIt}>登录</button>
</div>
}
运行结果:
完整代码如下:
//导入路由相关的组件
//HashRouter哈希路由 as起别名 router路由
//router 存放路由的容器
//Navlink 导航链接
//Switch一次匹配一个页面
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> |
<NavLink to="/admin">管理页面</NavLink> |
<NavLink to="/login">登录</NavLink> |
</div>
<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> */}
<Private path="/admin">
<Admin></Admin>
</Private>
<Route path="/admin" component={Admin}></Route>
<Route path="/login" component={Login}></Route>
{/* *代表匹配任意路径 */}
<Route path="*" component={NoMatch}></Route>
</Switch>
</div>
</Router>);
}
export default App;
//把props.chilren 解构为children ...rest 剩余的其他参数
function Private({children,...rest}){
// 把Private组件的参数除了children全部转移到Route组件
// Route不直接指定component通过render渲染出来
return <Route {...rest} render={
({location})=>{
// 如果获取本地存储的isLog得到了(登录了),返回children子节点Admin
// 否则 返回一个Redirect组件
// Redirect 默认跳转到 /login登录页面 传入一个state数据
// redirect自定义值 location.pathname(本地要跳转的地址)
return localStorage.getItem("isLog")?(children):<Redirect to={{pathname:"/login",state:{redirect:location.pathname}}}></Redirect>
}
} ></Route>
}
//登录
function Login({location,history}){
function logIt(){
//存储本地
localStorage.setItem("isLog",true);
//获取redirect信息
// var redirect=location.state.redirect ||"/";
var redirect =location.state && location.state.redirect ? location.state.redirect : '/';
//如果没有拿到就跳转到首页
history.push(redirect);
}
return <div>
<h1>登录</h1>
<button onClick={logIt}>登录</button>
</div>
}
//404页面
function NoMatch({location}){
return(<div>
<h3>404</h3>
<p>当前地址找不到:{location.pathname}</p>
<NavLink to ="/">首页</NavLink>
</div>)
}
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>
}
function Dash(){
return <div>
<h2>概览页面</h2>
</div>
}
function OrderList(){
return <div>
<h1>订单列表页面</h1>
</div>
}
//创建一个详情页面
function Details({match,location}){
return(<div>
<h1>详情内容</h1>
{/* <p>参数:{props.match.params.id}</p> */}
<p>参数:{match.params.id}</p>
<p>match:{JSON.stringify(match)}</p>
<p>location:{JSON.stringify(location)}</p>
</div>);
}
//match 匹配的路由参数 path 路径 url 地址
//isExact 是否精确匹配 params 路由的参数
function Home({history}){
return (<div>
<h1>首页内容</h1>
<button onClick={history.goBack}>返回</button>
</div>);
}
//不同NavLink跳转到首页
function About({match,history,location}){
return (<div>
<h1>关于首页内容</h1>
<button onClick={()=>history.push('/')}>首页</button>
<button onClick={()=>history.replace('/')}>首页-replace</button>
<button onClick={()=>console.log(history)}>首页-输出历史记录</button>
<NavLink to={{
pathname:"/details/abc",
search:"name=mumu&age=18",
hash:"good",
state:{redirect:"/about"}
}}>详情ABC</NavLink>
</div>);
}