建站
咨詢
售后
建站咨詢
新聞中心
本文小編為大家詳細(xì)介紹“react如何實現(xiàn)多個頁面之間跳轉(zhuǎn)”，內(nèi)容詳細(xì)，步驟清晰，細(xì)節(jié)處理妥當(dāng)，希望這篇“react如何實現(xiàn)多個頁面之間跳轉(zhuǎn)”文章能幫助大家解決疑惑，下面跟著小編的思路慢慢深入，一起來學(xué)習(xí)新知識吧。
創(chuàng)新互聯(lián)為企業(yè)級客戶提高一站式互聯(lián)網(wǎng)+設(shè)計服務(wù)，主要包括成都做網(wǎng)站、成都網(wǎng)站建設(shè)、成都APP應(yīng)用開發(fā)、微信小程序定制開發(fā)、宣傳片制作、LOGO設(shè)計等，幫助客戶快速提升營銷能力和企業(yè)形象，創(chuàng)新互聯(lián)各部門都有經(jīng)驗豐富的經(jīng)驗，可以確保每一個作品的質(zhì)量和創(chuàng)作周期，同時每年都有很多新員工加入，為我們帶來大量新的創(chuàng)意。
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 (
管理員頁面
);
}
其他幾個頁面也是類似的。
然后我們就可以在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 (
);
}
export default App;
然后可以在 Home 頁面用 Link 加上跳轉(zhuǎn)到其他頁面的鏈接，這樣就可以跳轉(zhuǎn)了：
import React from 'react';
import { Link } from 'react-router-dom';
function Home() {
return (
<>
首頁
- 登錄
- 后臺
- 管理員
);
}
export default Home;
到現(xiàn)在我們的應(yīng)用運(yùn)行起來是這樣的：
模塊劃分
雖然我們的跳轉(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 (
{publicRoutes.map(
({path, component, ...routes}) =>
)}
);
}
這樣我們的 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
} else {
// 如果沒有權(quán)限，返回配置的默認(rèn)路由
return
}
}
export default AuthRoute;
然后用我們的 AuthRoute 的渲染 adminRoutes 和 privateRoutes :
// ... 省略其他代碼 ...
{privateRoutes.map(
(route) =>
)}
{adminRoutes.map(
(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 (
<>
登錄頁
回首頁
);
}
export default Login;
到這里我們這個簡單的路由鑒權(quán)就完成了，具體跑起來效果如下：
讀到這里，這篇“react如何實現(xiàn)多個頁面之間跳轉(zhuǎn)”文章已經(jīng)介紹完畢，想要掌握這篇文章的知識點還需要大家自己動手實踐使用過才能領(lǐng)會，如果想了解更多相關(guān)內(nèi)容的文章，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。
當(dāng)前標(biāo)題：react如何實現(xiàn)多個頁面之間跳轉(zhuǎn)
地址分享：http://ef60e0e.cn/article/pdjhhs.html
