React で複数のページ間をジャンプする方法

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 および他のすべてのページ

React-Router の紹介

##ルーティングを実装するには認証は段階的に行う必要があります。最初に React-Router を使用してこれらのページで単純なプロジェクトを構築します。 create-react-app を直接使用して新しいプロジェクトを作成し、

フォルダーを作成して、その中に前述のページを置きます。

import React from 'react';

function Admin() {
  return (
    <h1>管理员页面</h1>
  );
}

ログイン後にコピー

他のページも同様です。

に

を導入します。ブラウザ -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;

を使用して他のページにジャンプするリンクを追加すると、次のようにジャンプできるようになります。 #<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false;">import React from &amp;#39;react&amp;#39;; import { Link } from &amp;#39;react-router-dom&amp;#39;; function Home() { return ( &lt;&gt; &lt;h1&gt;首页&lt;/h1&gt; &lt;ul&gt; &lt;li&gt;&lt;Link to=&quot;/login&quot;&gt;登录&lt;/Link&gt;&lt;/li&gt; &lt;li&gt;&lt;Link to=&quot;/backend&quot;&gt;后台&lt;/Link&gt;&lt;/li&gt; &lt;li&gt;&lt;Link to=&quot;/admin&quot;&gt;管理员&lt;/Link&gt;&lt;/li&gt; &lt;/ul&gt; &lt;/&gt; ); } export default Home;</pre><div class="contentsignin">ログイン後にコピー</div></div>これで、アプリケーションは次のように実行されます:

模块划分

虽然我们的跳转实现了，但是所有人都可以访问任何页面，我们前面的需求是要根据登录的角色限制访问的页面的，在写代码前，我们先来思考下应该怎么做这个。当然最直观最简单的方法就是每个页面都检测下当前用户的角色，匹配不上就报错或者跳回首页。我们现在只有几个页面，这样做好像也还好，但是如果我们的应用变大了，页面变多了，每个页面都来一次检测就显得很重复了，所以我们应该换个角度来思考这个问题。

仔细一看，其实我们总共就三种角色，对应三种不同的权限，这三个权限还有层级关系，高级别的权限包含了低级别的权限，所以我们的页面也可以按照这些权限分为三种：

公共页面
普通页面
管理员页面

为了好管理这三种页面，我们可以将他们抽取成三个文件，放到一个独立的文件夹 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 を導入する必要はなく、必要なプラットフォームパッケージを導入するだけで済みます。

• 異なる権限を必要とするルートについては、カテゴリに分けて別のファイルに構築できます。ルートの数がそれほど多くない場合は、それらを 1 つのファイルに入れて複数のファイルをエクスポートできます。配列。

• 認証が必要なルートの場合、高度なコンポーネントを使用して権限検証のロジックをカプセル化できます。他のページは設定するだけでよく、認証の問題について心配する必要はありません。まったく。

React-Routerの身近な使い方としては悪くありませんが、そのまま使えるわけではありませんが、その原理も知る必要があります。気に入ったら「いいね」してフォローしてください！

react ビデオ チュートリアル 」