react并没有提供像Vue专门创建路由的页面，react路由需要先安装，然后导入才能使用，下面是react路由从安装到实现的详细步骤，一起来看看吧！

开始前的准备：本案例需要先改造一下react项目的index.js文件

，关闭严格模式，路由才可正常跳转，否则会出现导航栏显示已跳转但是页面未跳转的情况！！

1：首先安装

npm i react-router-dom@5.0

react路由可以指定安装版本，我安装的是5.0版本的

2：在APP.js页面中导入

上图中路由组件的意思：

使用哪个导入哪个即可

3：使用路由

页面效果

4：路由传参

页面效果，123页面

abc页面

路由属性笔记

5：匹配404页面

页面效果

6：权限管理，某些特定页面只有在登录之后才能进入

具体效果看下面动图

以上就是react路由的基本使用，以下是本案例的源码

7：源码

//导入路由相关的组件
//HashRouter哈希路由 as起别名 router路由
//router 存放路由的容器
//navlink 导航链接
// Redirect 重定向
// 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><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.children 解构为children  ...rest 剩余的其他参数
function Private({ children, ...rest }) {// 把Private组件的参数除了children全部转移到Route组件中// Route不直接指定component通过render渲染出来return <Route {...rest} render={({ location }) => {// 如果获取本地存储的isLog为true(登录过了)，返回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||"/";// 如果没有拿到就跳转到首页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><h2>订单列表页面</h2></div>
}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>);
}
// 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:{reidrect:"/about"}}}>详情abc</NavLink></div>);
}

开始前的准备：本案例需要先改造一下react项目的index.js文件

，关闭严格模式，路由才可正常跳转，否则会出现导航栏显示已跳转但是页面未跳转的情况！！

1：首先安装

2：在APP.js页面中导入

3：使用路由

4：路由传参

5：匹配404页面

6：权限管理，某些特定页面只有在登录之后才能进入

7：源码

React路由最全详解相关推荐

ElasticSearch最全详细使用教程：入门、索引管理、映射详解、索引别名、分词器、文档管理、路由、搜索详解...
墨墨导读:之前我们分享了ElasticSearch最全详细使用教程:入门.索引管理.映射详解,本文详细介绍ElasticSearch的索引别名.分词器.文档管理.路由.搜索详解. 一.索引别名 1. ...
php为什么需要配置路由器,laravel 配置路由 api和web定义的路由的区别详解
1.路由经过中间件方面不同打开kerenl.php就可以看到区别 protected $middlewareGroups = [ 'web' => [ \App\Http\Middleware ...
Linux-shell-完全详解
Linux-shell-完全详解(1) 一. Shell简介:什么是Shell,Shell命令的两种执行方式1 二. 几种常见的Shell1 三. Shell脚本语言与编译型语言的差异2 四.什么时候 ...
webpack搭建php服务器,webpack搭建react开发环境步骤详解
这次给大家带来webpack搭建react开发环境步骤详解,webpack搭建react开发环境的注意事项有哪些,下面就是实战案例,一起来看一下.mkdir react-redux && ...
WEB前端之网页设计③----最新最全详解/如何在网页上创建表格
WEB前端之网页设计③--最新最全详解/如何在网页上创建表格一.表格效果图1: <table border="0px" cellspacing="1px" ...
element ui路由配置文件_element-ui使用导航栏跳转路由的用法详解
最近初学vue,试着做一个小项目熟悉语法与思想,其中使用elemen-ui的导航栏做路由跳转切换页面.下面记录一下学习过程 element-ui引入vue项目的用法参考首先复制官网的例子,在这基础上 ...
前端：深拷贝的多种方法（超全详解）
别划走 !走过路过不要错过:错过这个村,我在下一个村等你!坚持每天进步一点点:一天两天可能没发现有效果:但一年365天后你将会感谢今天的自己!!! 今天博主带大家了解一下前端常用的深拷贝方法:(超全详 ...
【学习笔记】薛定谔的喵咪Cat—球盒问题（全详解）
[学习笔记]薛定谔的喵咪Cat-球盒问题(全详解) 传送门:薛定谔的喵咪 $Luogu-U77460$(自自上传的题目,数据略水,尤其是 $opt=9$ ,以后找时间补上) [题目描述] 当一 ...
人工智能里程碑ChatGPT之最全详解图解
人工智能里程碑ChatGPT之最全详解图解 1. ChatGPT的前世今生 1.1 ChatGPT演化路线 1.2技术推进路线 2.ChatGPT主要功能及应用领域 2.1 主要功能 2.2 应用领域 ...

React路由最全详解

开始前的准备：本案例需要先改造一下react项目的index.js文件

，关闭严格模式，路由才可正常跳转，否则会出现导航栏显示已跳转但是页面未跳转的情况！！

1：首先安装

2：在APP.js页面中导入

3：使用路由

4：路由传参

5：匹配404页面

6：权限管理，某些特定页面只有在登录之后才能进入

7：源码

React路由最全详解相关推荐

最新文章

热门文章