搜索
首页web前端前端问答react 多个页面之间跳转怎么实现

react多个页面之间跳转的实现方法:1、引入“React-Router”;2、在Home页面用Link加上跳转到其他页面的链接;3、将多个路由放在一个文件并导出多个数组即可。

react 多个页面之间跳转怎么实现

本教程操作环境: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 文件夹,里面放入我们前面说的那几个页面:

858967ddd14a2513f365d4b8f70476b.jpg

我们页面先写简单点,先写个标题吧,比如这样:

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 &#39;react&#39;;
import {
  BrowserRouter as Router,
  Switch,
  Route,
} from "react-router-dom";
import Home from &#39;./pages/Home&#39;;
import Login from &#39;./pages/Login&#39;;
import Backend from &#39;./pages/Backend&#39;;
import Admin from &#39;./pages/Admin&#39;;

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 &#39;react&#39;;
import { Link } from &#39;react-router-dom&#39;;

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;

到现在我们的应用运行起来是这样的:

1259f5198a1ee44669fb41a5c6000d8a.gif

模块划分

虽然我们的跳转实现了,但是所有人都可以访问任何页面,我们前面的需求是要根据登录的角色限制访问的页面的,在写代码前,我们先来思考下应该怎么做这个。当然最直观最简单的方法就是每个页面都检测下当前用户的角色,匹配不上就报错或者跳回首页。我们现在只有几个页面,这样做好像也还好,但是如果我们的应用变大了,页面变多了,每个页面都来一次检测就显得很重复了,所以我们应该换个角度来思考这个问题。

仔细一看,其实我们总共就三种角色,对应三种不同的权限,这三个权限还有层级关系,高级别的权限包含了低级别的权限,所以我们的页面也可以按照这些权限分为三种:

公共页面
普通页面
管理员页面

为了好管理这三种页面,我们可以将他们抽取成三个文件,放到一个独立的文件夹 routes 里面,三个文件分别命名为 publicRoutes.jsprivateRoutes.jsadminRoutes.js

64106ec3a416166e27e514a951bc3e8.jpg

对于每个路由文件,我们可以将这类路由组织成数组,然后 export 出去给外面调用,比如 publicRoutes.js

import Login from &#39;../pages&#39;;
import Home from &#39;../pages/Home&#39;;

const publicRoutes = [
  {
    path: &#39;/login&#39;,
    component: Login,
    exact: true,
  },
  {
    path: &#39;/&#39;,
    component: Home,
    exact: true,
  },
];

export default publicRoutes;

然后我们外面使用的地方直接改为:

import publicRoutes from &#39;./routes/publicRoutes&#39;;

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.jsadminRoutes.js 里面的路由会比 publicRoutes.js 的多两个参数:

// privateRoutes.js
import Backend from &#39;../pages/Backend&#39;;

const privateRoutes = [
  {
    path: &#39;/backend&#39;,
    component: Backend,
    exact: true,
    role: &#39;user&#39;,       // 当前路由需要的角色权限
    backUrl: &#39;/login&#39;   // 不满足权限跳转的路由
  },
];

export default privateRoutes;

adminRoutes.js 是类似的写法:

// adminRoutes.js
import Admin from &#39;../pages/Admin&#39;;

const adminRoutes = [
  {
    path: &#39;/admin&#39;,
    component: Admin,
    exact: true,
    role: &#39;admin&#39;,       // 需要的权限是admin
    backUrl: &#39;/backend&#39;  // 不满足权限跳回后台页面
  },
];

export default adminRoutes;

然后就可以写我们的高级组件了,我们将它命名为 AuthRoute 吧,注意我们这里假设的用户登录时后端API会返回给我们当前用户的角色,一个用户可能有多个角色,比如普通用户的角色是 ['user'] ,管理员的角色是 ['user', 'admin'] ,具体的权限验证逻辑要看自己项目权限的设计,这里只是一个例子:

// AuthRoute.js
import React from &#39;react&#39;;
import { Route, Redirect } from &#39;react-router-dom&#39;;

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 的渲染 adminRoutesprivateRoutes :

// ... 省略其他代码 ...

{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 &#39;react&#39;;
import { Link } from &#39;react-router-dom&#39;;

function Login(props) {
  const {loginAsUser, loginAsAdmin, history} = props;

  const userLoginHandler = () => {
    loginAsUser();      // 调用父级方法设置用户权限
    history.replace(&#39;/backend&#39;);     // 登录后跳转后台页面
  }

  const adminLoginHandler = () => {
    loginAsAdmin();     // 调用父级方法设置管理员权限
    history.replace(&#39;/admin&#39;);     // 登录后跳转管理员页面
  }

  return (
    <>
      <h1>登录页</h1>
      <button onClick={userLoginHandler}>普通用户登录</button>
      <br/><br/>
      <button onClick={adminLoginHandler}>管理员登录</button>
      <br/><br/>
      <Link to="/">回首页</Link>
    </>
  );
}

export default Login;

到这里我们这个简单的路由鉴权就完成了,具体跑起来效果如下:

0c94ed4a3fdb61bc7fa57b27f80e9dc.jpg

总结

  • React-Router 可以用来管理前端的路由跳转,是 React 生态里面很重要的一个库。

  • React-Router 为了同时支持浏览器和 React-Native ,他分拆成了三个包 react-router 核心包, react-router-dom 浏览器包, react-router-native 支持 React-Native 。使用时不需要引入 react-router ,只需要引入需要的平台包就行。

  • 对于需要不同权限的路由,我们可以将他们拎出来分好类,单独建成一个文件,如果路由不多,放在一个文件导出多个数组也行。

  • 对于需要鉴权的路由,我们可以用一个高级组件将权限校验的逻辑封装在里面,其他页面只需要加好配置,完全不用关心鉴权的问题。

本文内容偏简单,作为熟悉React-Router的用法还不错,但是我们不能只会用,还要知道他的原理。喜欢的可以点赞关注下哦!

推荐学习:《react视频教程

以上是react 多个页面之间跳转怎么实现的详细内容。更多信息请关注PHP中文网其他相关文章!

声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
HTML和React的集成:实用指南HTML和React的集成:实用指南Apr 21, 2025 am 12:16 AM

HTML与React可以通过JSX无缝整合,构建高效的用户界面。1)使用JSX嵌入HTML元素,2)利用虚拟DOM优化渲染性能,3)通过组件化管理和渲染HTML结构。这种整合方式不仅直观,还能提升应用性能。

React和HTML:渲染数据和处理事件React和HTML:渲染数据和处理事件Apr 20, 2025 am 12:21 AM

React通过state和props高效渲染数据,并通过合成事件系统处理用户事件。1)使用useState管理状态,如计数器示例。2)事件处理通过在JSX中添加函数实现,如按钮点击。3)渲染列表需使用key属性,如TodoList组件。4)表单处理需使用useState和e.preventDefault(),如Form组件。

后端连接:反应如何与服务器互动后端连接:反应如何与服务器互动Apr 20, 2025 am 12:19 AM

React通过HTTP请求与服务器交互,实现数据的获取、发送、更新和删除。1)用户操作触发事件,2)发起HTTP请求,3)处理服务器响应,4)更新组件状态并重新渲染。

反应:专注于用户界面(前端)反应:专注于用户界面(前端)Apr 20, 2025 am 12:18 AM

React是一种用于构建用户界面的JavaScript库,通过组件化开发和虚拟DOM提高效率。1.组件与JSX:使用JSX语法定义组件,增强代码直观性和质量。2.虚拟DOM与渲染:通过虚拟DOM和diff算法优化渲染性能。3.状态管理与Hooks:Hooks如useState和useEffect简化状态管理和副作用处理。4.使用示例:从基本表单到高级的全局状态管理,使用ContextAPI。5.常见错误与调试:避免状态管理不当和组件更新问题,使用ReactDevTools调试。6.性能优化与最佳

React的角色:前端还是后端?澄清区别React的角色:前端还是后端?澄清区别Apr 20, 2025 am 12:15 AM

reactisafrontendlibrary,focusedonBuildingUserInterfaces.itmanagesuistateandupdatesefficefited fichifited firstualdom,以及EnternactSwithBackendServensEvesviaApisforDataHandling,butdoesnotprocessorsorstoredordordoredaiteffers。

在HTML中进行反应:构建交互式用户界面在HTML中进行反应:构建交互式用户界面Apr 20, 2025 am 12:05 AM

React可以嵌入到HTML中来增强或完全重写传统的HTML页面。1)使用React的基本步骤包括在HTML中添加一个根div,并通过ReactDOM.render()渲染React组件。2)更高级的应用包括使用useState管理状态和实现复杂的UI交互,如计数器和待办事项列表。3)优化和最佳实践包括代码分割、惰性加载和使用React.memo和useMemo来提高性能。通过这些方法,开发者可以利用React的强大功能来构建动态和响应迅速的用户界面。

反应:现代前端发展基础反应:现代前端发展基础Apr 19, 2025 am 12:23 AM

React是构建现代前端应用的JavaScript库。1.它采用组件化和虚拟DOM优化性能。2.组件使用JSX定义,状态和属性管理数据。3.Hooks简化生命周期管理。4.使用ContextAPI管理全局状态。5.常见错误需调试状态更新和生命周期。6.优化技巧包括Memoization、代码拆分和虚拟滚动。

React的未来:Web开发的趋势和创新React的未来:Web开发的趋势和创新Apr 19, 2025 am 12:22 AM

React的未来将专注于组件化开发的极致、性能优化和与其他技术栈的深度集成。1)React将进一步简化组件的创建和管理,推动组件化开发的极致。2)性能优化将成为重点,特别是在大型应用中的表现。3)React将与GraphQL和TypeScript等技术深度集成,提升开发体验。

See all articles

热AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

Undress AI Tool

免费脱衣服图片

Clothoff.io

Clothoff.io

AI脱衣机

Video Face Swap

Video Face Swap

使用我们完全免费的人工智能换脸工具轻松在任何视频中换脸!

热工具

SecLists

SecLists

SecLists是最终安全测试人员的伙伴。它是一个包含各种类型列表的集合,这些列表在安全评估过程中经常使用,都在一个地方。SecLists通过方便地提供安全测试人员可能需要的所有列表,帮助提高安全测试的效率和生产力。列表类型包括用户名、密码、URL、模糊测试有效载荷、敏感数据模式、Web shell等等。测试人员只需将此存储库拉到新的测试机上,他就可以访问到所需的每种类型的列表。

SublimeText3 Linux新版

SublimeText3 Linux新版

SublimeText3 Linux最新版

MinGW - 适用于 Windows 的极简 GNU

MinGW - 适用于 Windows 的极简 GNU

这个项目正在迁移到osdn.net/projects/mingw的过程中,你可以继续在那里关注我们。MinGW:GNU编译器集合(GCC)的本地Windows移植版本,可自由分发的导入库和用于构建本地Windows应用程序的头文件;包括对MSVC运行时的扩展,以支持C99功能。MinGW的所有软件都可以在64位Windows平台上运行。

Atom编辑器mac版下载

Atom编辑器mac版下载

最流行的的开源编辑器

DVWA

DVWA

Damn Vulnerable Web App (DVWA) 是一个PHP/MySQL的Web应用程序,非常容易受到攻击。它的主要目标是成为安全专业人员在合法环境中测试自己的技能和工具的辅助工具,帮助Web开发人员更好地理解保护Web应用程序的过程,并帮助教师/学生在课堂环境中教授/学习Web应用程序安全。DVWA的目标是通过简单直接的界面练习一些最常见的Web漏洞,难度各不相同。请注意,该软件中