react多个页面之间跳转的实现方法：1、引入“react-router”；2、在home页面用link加上跳转到其他页面的链接；3、将多个路由放在一个文件并导出多个数组即可。
本教程操作环境：windows10系统、react18.0.0版、dell g3电脑。
react 多个页面之间跳转怎么实现？
react 多页面跳转、使用react-router实现前端路由鉴权
react-router是react生态里面很重要的一环，现在react的单页应用的路由基本都是前端自己管理的，而不像以前是后端路由，react管理路由的库常用的就是就是react-router。本文想写一下react-router的使用，但是光介绍api又太平淡了，而且官方文档已经写得很好了，我这里就用一个常见的开发场景来看看react-router是怎么用的吧。而我们一般的系统都会有用户访问权限的限制，某些页面可能需要用户具有一定的权限才能访问。本文就是用react-router来实现一个前端鉴权模型。
应用示例
本文要实现的功能是大家经常遇到的场景，就是要控制不同的用户角色来访问不同的页面，这里总共有四个页面：
/index/login/backend/admin
另外还有三种角色：
未登录用户 ：只能访问网站首页 /index 和登录页 /login
普通用户 ：可以访问网站首页 /index ，登录页 /login 和后台页面 /backend
管理员 ：可以访问管理页面 /admin 和其他所有页面
引入react-router要实现路由鉴权，我们还得一步一步来，我们先用react-router搭建一个简单的带有这几个页面的项目。我们直接用 create-react-app 创建一个新项目，然后建了一个 pages 文件夹，里面放入我们前面说的那几个页面：
我们页面先写简单点，先写个标题吧，比如这样：
import react from 'react';function admin() { return ( <h1>管理员页面</h1> );}
其他几个页面也是类似的。
然后我们就可以在app.js里面引入react-router做路由跳转了，注意我们在浏览器上使用的是react-router-dom，新版的react-router将核心逻辑层和展示层分开了，核心逻辑会处理路由匹配等，展示层会处理实际的跳转和路由变化的监听，之所以这么分，是因为react-router不仅仅需要支持浏览器，还需要支持react native，这两个平台的监听和跳转是不一样的，所以现在react-router下面有好几个包了：
react-router ：核心逻辑处理，提供一些公用的基类
react-router-dom ：具体实现浏览器相关的路由监听和跳转
react-router-native ：具体实现rn相关的路由监听和跳转
在实际使用时，我们一般不需要引用 react-router ，而是直接用 react-router-dom 就行，因为它自己会去引用 react-router 。下面我们在项目里面引入 react-router-dom 。
import react from 'react';import { browserrouter as router, switch, route,} from "react-router-dom";import home from './pages/home';import login from './pages/login';import backend from './pages/backend';import admin from './pages/admin';function app() { return ( <router> <switch> <route path="/login" component={login}/> <route path="/backend" component={backend}/> <route path="/admin" component={admin}/> <route path="/" component={home}/> </switch> </router> );}export default app;
然后可以在 home 页面用 link 加上跳转到其他页面的链接，这样就可以跳转了：
import react from 'react';import { link } from 'react-router-dom';function home() { return ( <> <h1>首页</h1> <ul> <li><link to="/login">登录</link></li> <li><link to="/backend">后台</link></li> <li><link to="/admin">管理员</link></li> </ul> </> );}export default home;
到现在我们的应用运行起来是这样的：
模块划分虽然我们的跳转实现了，但是所有人都可以访问任何页面，我们前面的需求是要根据登录的角色限制访问的页面的，在写代码前，我们先来思考下应该怎么做这个。当然最直观最简单的方法就是每个页面都检测下当前用户的角色，匹配不上就报错或者跳回首页。我们现在只有几个页面，这样做好像也还好，但是如果我们的应用变大了，页面变多了，每个页面都来一次检测就显得很重复了，所以我们应该换个角度来思考这个问题。
仔细一看，其实我们总共就三种角色，对应三种不同的权限，这三个权限还有层级关系，高级别的权限包含了低级别的权限，所以我们的页面也可以按照这些权限分为三种：
公共页面普通页面管理员页面
为了好管理这三种页面，我们可以将他们抽取成三个文件，放到一个独立的文件夹 routes 里面，三个文件分别命名为 publicroutes.js ， privateroutes.js ， adminroutes.js ：
对于每个路由文件，我们可以将这类路由组织成数组，然后 export 出去给外面调用，比如 publicroutes.js ：
import login from '../pages';import home from '../pages/home';const publicroutes = [ { path: '/login', component: login, exact: true, }, { path: '/', component: home, exact: true, },];export default publicroutes;
然后我们外面使用的地方直接改为：
import publicroutes from './routes/publicroutes';function app() { return ( <router> <switch> {publicroutes.map( ({path, component, ...routes}) => <route key={path} path={path} component={component} {...routes}/> )} <route path="/backend" component={backend}/> <route path="/admin" component={admin}/> </switch> </router> );}
这样我们的 app.js 里面就不会有冗长的路由路由列表了，而是只需要循环一个数组就行了。但是对于需要登录才能访问的页面和管理员页面我们不能直接渲染 route 组件，我们最好再封装一个高级组件，将鉴权的工作放到这个组件里面去，这样我们普通的页面在实现时就不需要关心怎么鉴权了。
封装高级组件要封装这个鉴权组件思路也很简单，前面我们将 publicroutes 直接拿来循环渲染了 route 组件，我们的鉴权组件只需要在这个基础上再加一个逻辑就行了：在渲染真正的 route 组件前先检查一下当前用户是否有对应的权限，如果有就直接渲染 route 组件，如果没有就返回某个页面，可以是登录页或者后台首页，具体根据自己项目需求来。所以我们的路由配置文件 privateroutes.js ， adminroutes.js 里面的路由会比 publicroutes.js 的多两个参数：
// privateroutes.jsimport backend from '../pages/backend';const privateroutes = [ { path: '/backend', component: backend, exact: true, role: 'user', // 当前路由需要的角色权限 backurl: '/login' // 不满足权限跳转的路由 },];export default privateroutes;
adminroutes.js 是类似的写法：
// adminroutes.jsimport admin from '../pages/admin';const adminroutes = [ { path: '/admin', component: admin, exact: true, role: 'admin', // 需要的权限是admin backurl: '/backend' // 不满足权限跳回后台页面 },];export default adminroutes;
然后就可以写我们的高级组件了，我们将它命名为 authroute 吧，注意我们这里假设的用户登录时后端api会返回给我们当前用户的角色，一个用户可能有多个角色，比如普通用户的角色是 ['user'] ，管理员的角色是 ['user', 'admin'] ，具体的权限验证逻辑要看自己项目权限的设计，这里只是一个例子：
// authroute.jsimport react from 'react';import { route, redirect } from 'react-router-dom';function authroute(props) { const { user: { role: userrole }, role: routerole, backurl, ...otherprops } = props; // 如果用户有权限，就渲染对应的路由 if (userrole && userrole.indexof(routerole) > -1) { return <route {...otherprops} /> } else { // 如果没有权限，返回配置的默认路由 return <redirect to={backurl} /> }}export default authroute;
然后用我们的 authroute 的渲染 adminroutes 和 privateroutes :
// ... 省略其他代码 ...{privateroutes.map( (route) => <authroute key={route.path} {...route}/>)}{adminroutes.map( (route) => <authroute key={route.path} {...route}/>)}
登录设置权限在我们的 authroute 里面用到了 user: { role } 这个变量，但是我们还没设置它。真实项目中一般是登录的时候后端api会返回当前用户的角色，然后前端将这个权限信息保存在一些状态管理工具里面，比如 redux 。我们这里直接在 login 页面写死两个按钮来模拟这个权限了，用户的配置就用根组件的 state 来管理了， login 页面的两个按钮会改变对应的 state ：
import react from 'react';import { link } from 'react-router-dom';function login(props) { const {loginasuser, loginasadmin, history} = props; const userloginhandler = () => { loginasuser(); // 调用父级方法设置用户权限 history.replace('/backend'); // 登录后跳转后台页面 } const adminloginhandler = () => { loginasadmin(); // 调用父级方法设置管理员权限 history.replace('/admin'); // 登录后跳转管理员页面 } return ( <> <h1>登录页</h1> <button onclick={userloginhandler}>普通用户登录</button> <br/><br/> <button onclick={adminloginhandler}>管理员登录</button> <br/><br/> <link to="/">回首页</link> </> );}export default login;
到这里我们这个简单的路由鉴权就完成了，具体跑起来效果如下：
总结react-router 可以用来管理前端的路由跳转，是 react 生态里面很重要的一个库。
react-router 为了同时支持浏览器和 react-native ，他分拆成了三个包 react-router 核心包， react-router-dom 浏览器包， react-router-native 支持 react-native 。使用时不需要引入 react-router ，只需要引入需要的平台包就行。
对于需要不同权限的路由，我们可以将他们拎出来分好类，单独建成一个文件，如果路由不多，放在一个文件导出多个数组也行。
对于需要鉴权的路由，我们可以用一个高级组件将权限校验的逻辑封装在里面，其他页面只需要加好配置，完全不用关心鉴权的问题。
本文内容偏简单，作为熟悉react-router的用法还不错，但是我们不能只会用，还要知道他的原理。喜欢的可以点赞关注下哦！
推荐学习：《react视频教程》
以上就是react 多个页面之间跳转怎么实现的详细内容。