搜尋
首頁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 資料夾,裡面放入我們前面說的幾個頁面:

react 多個頁面之間跳轉怎麼實現

我們頁面先寫簡單點,先寫個標題吧,例如這樣:

import React from 'react';

function Admin() {
  return (
    <h1 id="管理员页面">管理员页面</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 id="首页">首页</h1>
      <ul>
        <li><Link to="/login">登录</Link></li>
        <li><Link to="/backend">后台</Link></li>
        <li><Link to="/admin">管理员</Link></li>
      </ul>
    </>
  );
}

export default Home;

到現在我們的應用程式運行起來是這樣的:

react 多個頁面之間跳轉怎麼實現

模块划分

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

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

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

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

react 多個頁面之間跳轉怎麼實現

对于每个路由文件,我们可以将这类路由组织成数组,然后 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 id="登录页">登录页</h1>
      <button onClick={userLoginHandler}>普通用户登录</button>
      <br/><br/>
      <button onClick={adminLoginHandler}>管理员登录</button>
      <br/><br/>
      <Link to="/">回首页</Link>
    </>
  );
}

export default Login;

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

react 多個頁面之間跳轉怎麼實現

總結

  • 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
使用usestate()管理狀態:實用教程使用usestate()管理狀態:實用教程Apr 24, 2025 pm 05:05 PM

useState優於類組件和其它狀態管理方案,因為它簡化了狀態管理,使代碼更清晰、更易讀,並與React的聲明性本質一致。 1)useState允許在函數組件中直接聲明狀態變量,2)它通過鉤子機制在重新渲染間記住狀態,3)使用useState可以利用React的優化如備忘錄化,提升性能,4)但需注意只能在組件頂層或自定義鉤子中調用,避免在循環、條件或嵌套函數中使用。

何時使用usestate()以及何時考慮替代狀態管理解決方案何時使用usestate()以及何時考慮替代狀態管理解決方案Apr 24, 2025 pm 04:49 PM

useUsestate()forlocalComponentStateMangementighatighation; 1)usestate()isidealforsimple,localforsimple.2)useglobalstate.2)useglobalstateSolutionsLikErcontExtforsharedState.3)

React的可重複使用的組件:增強代碼可維護性和效率React的可重複使用的組件:增強代碼可維護性和效率Apr 24, 2025 pm 04:45 PM

ReusableComponentsInrectenHanceCodainainability and效率byallowingDevelostEsteSeTheseTheseThesAmeCompOntionActActRossDifferentPartSofanApplicationorprojects.1)heSredunceRedUndenceNandSimplifyUpdates.2)yensureconsistencyInuserexperience.3)

反應中的虛擬DOM:通過有效更新來提高性能反應中的虛擬DOM:通過有效更新來提高性能Apr 24, 2025 pm 04:41 PM

TheVirtualDOMisalightweightin-memorycopyoftherealDOMusedbyReacttooptimizeUIupdates.ItboostsperformancebyminimizingdirectDOMmanipulationthroughaprocessofupdatingtheVirtualDOMfirst,thenapplyingonlynecessarychangestotheactualDOM.

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.性能優化與最佳

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

使用我們完全免費的人工智慧換臉工具,輕鬆在任何影片中換臉!

熱工具

Safe Exam Browser

Safe Exam Browser

Safe Exam Browser是一個安全的瀏覽器環境,安全地進行線上考試。該軟體將任何電腦變成一個安全的工作站。它控制對任何實用工具的訪問,並防止學生使用未經授權的資源。

Atom編輯器mac版下載

Atom編輯器mac版下載

最受歡迎的的開源編輯器

SAP NetWeaver Server Adapter for Eclipse

SAP NetWeaver Server Adapter for Eclipse

將Eclipse與SAP NetWeaver應用伺服器整合。

SublimeText3漢化版

SublimeText3漢化版

中文版,非常好用

SecLists

SecLists

SecLists是最終安全測試人員的伙伴。它是一個包含各種類型清單的集合,這些清單在安全評估過程中經常使用,而且都在一個地方。 SecLists透過方便地提供安全測試人員可能需要的所有列表,幫助提高安全測試的效率和生產力。清單類型包括使用者名稱、密碼、URL、模糊測試有效載荷、敏感資料模式、Web shell等等。測試人員只需將此儲存庫拉到新的測試機上,他就可以存取所需的每種類型的清單。