ホームページ >ウェブフロントエンド >フロントエンドQ&A >React で複数のページ間をジャンプする方法
React で複数ページ間のジャンプを実装する方法: 1. 「React-Router」を導入する; 2. トップページのリンクを使用して他のページにジャンプするリンクを追加する; 3. 複数のルートを追加する1 つのファイルにまとめて複数の配列をエクスポートします。
このチュートリアルの動作環境: Windows 10 システム、react18.0.0 バージョン、Dell G3 コンピューター。
react 複数のページ間を移動するにはどうすればよいですか?
react マルチページ ジャンプ、React-Router を使用してフロントエンド ルーティング認証を実装する
React-Router
React はエコシステムの非常に重要な部分です。現在、React シングルページ アプリケーションのルーティングは、以前のバックエンド ルーティングとは異なり、基本的にフロントエンド自体によって管理されています。ルーティングを管理するために React で一般的に使用されるライブラリは次のとおりです。 React-Router
。この記事では React-Router
の使い方について書きたいのですが、API を紹介するだけでは地味すぎるし、公式ドキュメントもすでに充実しているので、ここでは一般的な開発シナリオを使って見ていきます React-Routerの使い方
。当社の一般的なシステムにはユーザーのアクセス権限に制限があり、一部のページではユーザーがアクセスするために特定の権限を必要とする場合があります。この記事では、React-Router
を使用してフロントエンド認証モデルを実装します。
アプリケーション例
この記事で実装する機能は、誰もがよく遭遇するシナリオ、つまり、異なるページにアクセスするための異なるユーザーの役割を制御するシナリオです。合計 4 つのページです:
/index /login /backend /admin
3 つの役割もあります:
#非ログイン ユーザー
: Web サイトのホーム ページ /index
とログイン ページ /login
一般ユーザー
: にのみアクセスできます。 Web サイトのホームページ /index
、ログイン ページ /login
、およびバックエンド ページ /backend
#Administrator# にアクセスします。 ##: 管理ページにアクセスできます/admin
および他のすべてのページ
フォルダーを作成して、その中に前述のページを置きます。
import React from 'react'; function Admin() { return ( <h1>管理员页面</h1> ); }
他のページも同様です。
に
React-Router を導入します。ブラウザ -router-dom で react を使用していることに注意してください。
、新しいバージョンの React-Router
はコア ロジック層とプレゼンテーション層を分離し、コア ロジックはルート マッチングなどを処理し、プレゼンテーション層は実際のジャンプとルートの監視を処理します。このように分割されている理由は、React-Router がブラウザーをサポートする必要があるだけでなく、React Native もサポートする必要があるためです。これら 2 つのプラットフォームのモニタリングとジャンプは異なるため、現在 React-Router の下にはいくつかのパッケージがあります。ルーター: react-router
: コアロジック処理、いくつかのパブリック基本クラスを提供します
react-router-dom
: ブラウザーの特定の実装関連するルートの監視とジャンピング
react-router-native
: RN 関連のルーティングの監視とジャンピングの具体的な実装
実際の使用では、通常は引用する必要はありません。 react-router
ただし、
自体を参照するため、react-router-dom
を直接使用してください。次に、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 を使用して他のページにジャンプするリンクを追加すると、次のようにジャンプできるようになります。 #<pre class="brush:php;toolbar:false;">import React from &#39;react&#39;;
import { Link } from &#39;react-router-dom&#39;;
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;</pre>
これで、アプリケーションは次のように実行されます:
虽然我们的跳转实现了,但是所有人都可以访问任何页面,我们前面的需求是要根据登录的角色限制访问的页面的,在写代码前,我们先来思考下应该怎么做这个。当然最直观最简单的方法就是每个页面都检测下当前用户的角色,匹配不上就报错或者跳回首页。我们现在只有几个页面,这样做好像也还好,但是如果我们的应用变大了,页面变多了,每个页面都来一次检测就显得很重复了,所以我们应该换个角度来思考这个问题。
仔细一看,其实我们总共就三种角色,对应三种不同的权限,这三个权限还有层级关系,高级别的权限包含了低级别的权限,所以我们的页面也可以按照这些权限分为三种:
公共页面 普通页面 管理员页面
为了好管理这三种页面,我们可以将他们抽取成三个文件,放到一个独立的文件夹 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 の両方をサポートするために、彼はそれを 3 つのパッケージに分割しました
react-router コア パッケージ、
react-router-dom ブラウザ パッケージ、
react-router-native は
React-Native をサポートします。使用する際に
react-router を導入する必要はなく、必要なプラットフォームパッケージを導入するだけで済みます。
React-Routerの身近な使い方としては悪くありませんが、そのまま使えるわけではありませんが、その原理も知る必要があります。気に入ったら「いいね」してフォローしてください!
react ビデオ チュートリアル 」
以上がReact で複数のページ間をジャンプする方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。