react如何實現多個頁面之間跳轉

本文小編為大家詳細介紹“react如何實現多個頁面之間跳轉”，內容詳細，步驟清晰，細節處理妥當，希望這篇“react如何實現多個頁面之間跳轉”文章能幫助大家解決疑惑，下面跟著小編的思路慢慢深入，一起來學習新知識吧。

react多個頁面之間跳轉的實現方法：1、引入“React-Router”；2、在Home頁面用Link加上跳轉到其他頁面的鏈接；3、將多個路由放在一個文件并導出多個數組即可。

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 (
    <h2>管理員頁面</h2>
  );
}

其他幾個頁面也是類似的。

然后我們就可以在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 (
    <>
      <h2>首頁</h2>
      <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.js
import Backend from '../pages/Backend';

const privateRoutes = [
  {
    path: '/backend',
    component: Backend,
    exact: true,
    role: 'user',       // 當前路由需要的角色權限
    backUrl: '/login'   // 不滿足權限跳轉的路由
  },
];

export default privateRoutes;

adminRoutes.js 是類似的寫法：

// adminRoutes.js
import 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.js
import 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 (
    <>
      <h2>登錄頁</h2>
      <button onClick={userLoginHandler}>普通用戶登錄</button>
      <br/><br/>
      <button onClick={adminLoginHandler}>管理員登錄</button>
      <br/><br/>
      <Link to="/">回首頁</Link>
    </>
  );
}

export default Login;

到這里我們這個簡單的路由鑒權就完成了，具體跑起來效果如下：

讀到這里，這篇“react如何實現多個頁面之間跳轉”文章已經介紹完畢，想要掌握這篇文章的知識點還需要大家自己動手實踐使用過才能領會，如果想了解更多相關內容的文章，歡迎關注億速云行業資訊頻道。