React路由使用详解

安装路由

打开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页面放在最后，并在外层加上组件控制只匹配一个页面。当无其他匹配页面时就显示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>}

React路由使用详解相关推荐

React 路由react-router-dom详解
React 路由react-router-dom详解 ( 路由嵌套 + 路由传参 + 路由权限 + 路由优化按需导入 + 404页面 ) 前面我们先了解一下路由是什么? 路由分类有哪些?内置API ...
一文带你搞懂React路由（详解版）
文章目录 React 路由
React 路由组件详解
文章目录路由组件 1.HashRouter和BrowserRouter 2.Route 3.Router 4.Link和NavLink 5.Redirect 6.Switch 7.withRoute ...
js路由在php上面使用,React中路由使用详解
这次给大家带来React中路由使用详解,React中路由使用的注意事项有哪些,下面就是实战案例,一起来看一下. 路由通过 URL 映射到对应的功能实现,React 的路由使用要先引入 react-r ...
25、react 中使用路由 router 详解
react 中使用路由 router 详解今天开始最新的一个模块,也是 react 开发中最重要的一部分,就是路由. SPA 理解我们使用原生的 HTML + CSS + JavaScript 开 ...
python Django Rest_Framework框架视图集与路由Routers详解（图文并茂版）
视图集与路由Routers详解视图集 ViewSet视图集代码实现 GenericViewSet视图集代码实现 ModelViewSet视图集 ReadOnlyModelViewSet视图集路 ...
单臂路由的详解及简单配置
单臂路由的详解及简单配置前言 1.什么是单臂路由 2.什么是逻辑子接口 3.单臂路由的配置 4.单臂路由的优缺点 1.什么是单臂路由单臂路由(router-on-a-stick)是指在路由器的一个 ...
ls路由算法_路由算法详解
路由算法详解1. 引言 2. 路由器基础知识 3. LS算法 4. 示例:Dijkstra算法 5. DV算法 6. 分级路由如果您已经阅读过博闻网中的路由器工作原理一文,您会了解到路由器的作用是管 ...
前端路由模式详解（hash和history）
前端路由模式详解(hash和history) 前端路由有两种模式:hash 模式和 history 模式,接下来分析这两种模式的实现方式和优缺点. hash 模式 hash 模式是一种把前端路由的路径 ...