react多個頁面之間跳轉的實作方法：1、引入「React-Router」；2、在Home頁面用Link加上跳到其他頁面的連結；3、將多個路由放在一個文件並匯出多個數組即可。
本教學操作環境：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搭建一個簡單的有這幾個頁面的項目。我們直接用create-react-app 建立一個新項目，然後建了一個pages 資料夾，裡面放入我們前面說的幾個頁面：
我們頁面先寫簡單點，先寫個標題吧，例如這樣：
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 '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 (
<>
<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;到現在我們的應用程式運行起來是這樣的：
虽然我们的跳转实现了，但是所有人都可以访问任何页面，我们前面的需求是要根据登录的角色限制访问的页面的，在写代码前，我们先来思考下应该怎么做这个。当然最直观最简单的方法就是每个页面都检测下当前用户的角色，匹配不上就报错或者跳回首页。我们现在只有几个页面，这样做好像也还好，但是如果我们的应用变大了，页面变多了，每个页面都来一次检测就显得很重复了，所以我们应该换个角度来思考这个问题。
仔细一看，其实我们总共就三种角色，对应三种不同的权限，这三个权限还有层级关系，高级别的权限包含了低级别的权限，所以我们的页面也可以按照这些权限分为三种：
公共页面 普通页面 管理员页面
为了好管理这三种页面，我们可以将他们抽取成三个文件，放到一个独立的文件夹 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 (
<>
<h1>登录页</h1>
<button onClick={userLoginHandler}>普通用户登录</button>
<br/><br/>
<button onClick={adminLoginHandler}>管理员登录</button>
<br/><br/>
<Link to="/">回首页</Link>
</>
);
}
export default Login;到这里我们这个简单的路由鉴权就完成了，具体跑起来效果如下：
React-Router 可以用來管理前端的路由跳轉，是React 生態裡面很重要的一個庫。
React-Router 為了同時支援瀏覽器和React-Native ，他分拆成了三個套件react- router 核心包， react-router-dom 瀏覽器包， react-router-native 支援React-Native 。使用時不需要引入 react-router ，只需要引入需要的平台包就行。
對於需要不同權限的路由，我們可以將他們拎出來分好類，單獨建成一個文件，如果路由不多，放在一個文件導出多個數組也行。
對於需要鑑權的路由，我們可以用一個高階元件將權限校驗的邏輯封裝在裡面，其他頁面只需要加好配置，完全不用關心鑑權的問題。
本文內容偏簡單，作為熟悉React-Router的用法還不錯，但是我們不能只會用，還要知道他的原理。喜歡的可以按讚關注下哦！
推薦學習：《react影片教學》
以上是react 多個頁面之間跳轉怎麼實現的詳細內容。更多資訊請關注PHP中文網其他相關文章！
