react如何實現(xiàn)多個頁面之間跳轉(zhuǎn)

本文小編為大家詳細(xì)介紹“react如何實現(xiàn)多個頁面之間跳轉(zhuǎn)”，內(nèi)容詳細(xì)，步驟清晰，細(xì)節(jié)處理妥當(dāng)，希望這篇“react如何實現(xiàn)多個頁面之間跳轉(zhuǎn)”文章能幫助大家解決疑惑，下面跟著小編的思路慢慢深入，一起來學(xué)習(xí)新知識吧。

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

react 多頁面跳轉(zhuǎn)、使用React-Router實現(xiàn)前端路由鑒權(quán)

React-Router是React生態(tài)里面很重要的一環(huán)，現(xiàn)在React的單頁應(yīng)用的路由基本都是前端自己管理的，而不像以前是后端路由，React管理路由的庫常用的就是就是React-Router。本文想寫一下React-Router的使用，但是光介紹API又太平淡了，而且官方文檔已經(jīng)寫得很好了，我這里就用一個常見的開發(fā)場景來看看React-Router是怎么用的吧。而我們一般的系統(tǒng)都會有用戶訪問權(quán)限的限制，某些頁面可能需要用戶具有一定的權(quán)限才能訪問。本文就是用React-Router來實現(xiàn)一個前端鑒權(quán)模型。

應(yīng)用示例

本文要實現(xiàn)的功能是大家經(jīng)常遇到的場景，就是要控制不同的用戶角色來訪問不同的頁面，這里總共有四個頁面：

/index
/login
/backend
/admin

另外還有三種角色：

• 未登錄用戶 ：只能訪問網(wǎng)站首頁 /index 和登錄頁 /login

• 普通用戶 ：可以訪問網(wǎng)站首頁 /index ，登錄頁 /login 和后臺頁面 /backend

• 管理員 ：可以訪問管理頁面 /admin 和其他所有頁面

引入React-Router

要實現(xiàn)路由鑒權(quán)，我們還得一步一步來，我們先用React-Router搭建一個簡單的帶有這幾個頁面的項目。我們直接用 create-react-app 創(chuàng)建一個新項目，然后建了一個 pages 文件夾，里面放入我們前面說的那幾個頁面：

我們頁面先寫簡單點，先寫個標(biāo)題吧，比如這樣：

import React from 'react';

function Admin() {
  return (
    <h2>管理員頁面</h2>
  );
}

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

然后我們就可以在App.js里面引入React-Router做路由跳轉(zhuǎn)了，注意我們在瀏覽器上使用的是react-router-dom，新版的React-Router將核心邏輯層和展示層分開了，核心邏輯會處理路由匹配等，展示層會處理實際的跳轉(zhuǎn)和路由變化的監(jiān)聽，之所以這么分，是因為React-Router不僅僅需要支持瀏覽器，還需要支持React Native，這兩個平臺的監(jiān)聽和跳轉(zhuǎn)是不一樣的，所以現(xiàn)在React-Router下面有好幾個包了：

react-router ：核心邏輯處理，提供一些公用的基類

react-router-dom ：具體實現(xiàn)瀏覽器相關(guān)的路由監(jiān)聽和跳轉(zhuǎn)

react-router-native ：具體實現(xiàn)RN相關(guān)的路由監(jiān)聽和跳轉(zhuǎn)

在實際使用時，我們一般不需要引用 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 加上跳轉(zhuǎn)到其他頁面的鏈接，這樣就可以跳轉(zhuǎn)了：

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;

到現(xiàn)在我們的應(yīng)用運行起來是這樣的：

模塊劃分

雖然我們的跳轉(zhuǎn)實現(xiàn)了，但是所有人都可以訪問任何頁面，我們前面的需求是要根據(jù)登錄的角色限制訪問的頁面的，在寫代碼前，我們先來思考下應(yīng)該怎么做這個。當(dāng)然最直觀最簡單的方法就是每個頁面都檢測下當(dāng)前用戶的角色，匹配不上就報錯或者跳回首頁。我們現(xiàn)在只有幾個頁面，這樣做好像也還好，但是如果我們的應(yīng)用變大了，頁面變多了，每個頁面都來一次檢測就顯得很重復(fù)了，所以我們應(yīng)該換個角度來思考這個問題。

仔細(xì)一看，其實我們總共就三種角色，對應(yīng)三種不同的權(quán)限，這三個權(quán)限還有層級關(guān)系，高級別的權(quán)限包含了低級別的權(quán)限，所以我們的頁面也可以按照這些權(quán)限分為三種：

公共頁面
普通頁面
管理員頁面

為了好管理這三種頁面，我們可以將他們抽取成三個文件，放到一個獨立的文件夾 routes 里面，三個文件分別命名為 publicRoutes.js ， privateRoutes.js ， adminRoutes.js ：

對于每個路由文件，我們可以將這類路由組織成數(shù)組，然后 export 出去給外面調(diào)用，比如 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 里面就不會有冗長的路由路由列表了，而是只需要循環(huán)一個數(shù)組就行了。但是對于需要登錄才能訪問的頁面和管理員頁面我們不能直接渲染 Route 組件，我們最好再封裝一個高級組件，將鑒權(quán)的工作放到這個組件里面去，這樣我們普通的頁面在實現(xiàn)時就不需要關(guān)心怎么鑒權(quán)了。

封裝高級組件

要封裝這個鑒權(quán)組件思路也很簡單，前面我們將 publicRoutes 直接拿來循環(huán)渲染了 Route 組件，我們的鑒權(quán)組件只需要在這個基礎(chǔ)上再加一個邏輯就行了：在渲染真正的 Route 組件前先檢查一下當(dāng)前用戶是否有對應(yīng)的權(quán)限，如果有就直接渲染 Route 組件，如果沒有就返回某個頁面，可以是登錄頁或者后臺首頁，具體根據(jù)自己項目需求來。所以我們的路由配置文件 privateRoutes.js ， adminRoutes.js 里面的路由會比 publicRoutes.js 的多兩個參數(shù)：

// privateRoutes.js
import Backend from '../pages/Backend';

const privateRoutes = [
  {
    path: '/backend',
    component: Backend,
    exact: true,
    role: 'user',       // 當(dāng)前路由需要的角色權(quán)限
    backUrl: '/login'   // 不滿足權(quán)限跳轉(zhuǎn)的路由
  },
];

export default privateRoutes;

adminRoutes.js 是類似的寫法：

// adminRoutes.js
import Admin from '../pages/Admin';

const adminRoutes = [
  {
    path: '/admin',
    component: Admin,
    exact: true,
    role: 'admin',       // 需要的權(quán)限是admin
    backUrl: '/backend'  // 不滿足權(quán)限跳回后臺頁面
  },
];

export default adminRoutes;

然后就可以寫我們的高級組件了，我們將它命名為 AuthRoute 吧，注意我們這里假設(shè)的用戶登錄時后端API會返回給我們當(dāng)前用戶的角色，一個用戶可能有多個角色，比如普通用戶的角色是 ['user'] ，管理員的角色是 ['user', 'admin'] ，具體的權(quán)限驗證邏輯要看自己項目權(quán)限的設(shè)計，這里只是一個例子：

// 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;

  // 如果用戶有權(quán)限，就渲染對應(yīng)的路由
  if (userRole && userRole.indexOf(routeRole) > -1) {
    return <Route {...otherProps} />
  } else {
    // 如果沒有權(quán)限，返回配置的默認(rèn)路由
    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}/>
)}

登錄設(shè)置權(quán)限

在我們的 AuthRoute 里面用到了 user: { role } 這個變量，但是我們還沒設(shè)置它。真實項目中一般是登錄的時候后端API會返回當(dāng)前用戶的角色，然后前端將這個權(quán)限信息保存在一些狀態(tài)管理工具里面，比如 Redux 。我們這里直接在 Login 頁面寫死兩個按鈕來模擬這個權(quán)限了，用戶的配置就用根組件的 state 來管理了， Login 頁面的兩個按鈕會改變對應(yīng)的 state ：

import React from 'react';
import { Link } from 'react-router-dom';

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

  const userLoginHandler = () => {
    loginAsUser();      // 調(diào)用父級方法設(shè)置用戶權(quán)限
    history.replace('/backend');     // 登錄后跳轉(zhuǎn)后臺頁面
  }

  const adminLoginHandler = () => {
    loginAsAdmin();     // 調(diào)用父級方法設(shè)置管理員權(quán)限
    history.replace('/admin');     // 登錄后跳轉(zhuǎn)管理員頁面
  }

  return (
    <>
      <h2>登錄頁</h2>
      <button onClick={userLoginHandler}>普通用戶登錄</button>
      <br/><br/>
      <button onClick={adminLoginHandler}>管理員登錄</button>
      <br/><br/>
      <Link to="/">回首頁</Link>
    </>
  );
}

export default Login;

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

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