반응에서 여러 페이지 사이를 이동하는 방법

React에서 여러 페이지 간 이동을 구현하는 방법: 1. "React-Router"를 도입합니다. 2. 홈 페이지에서 링크를 사용하여 다른 페이지로 이동할 수 있는 링크를 추가합니다. 3. 하나의 파일에 여러 경로를 넣고 여러 개를 내보냅니다. 배열.

이 튜토리얼의 운영 환경: Windows 10 시스템, 반응 버전 18.0.0, Dell G3 컴퓨터.

반응에서 여러 페이지 사이를 이동하는 방법은 무엇입니까?

react 다중 페이지 점프, React-Router를 사용하여 프런트 엔드 라우팅 인증 달성

React-Router는 React 생태계에서 매우 중요한 부분이며 이제 React의 단일- 페이지 애플리케이션 라우팅은 이전의 백엔드 라우팅과 달리 기본적으로 프런트엔드 자체에서 관리됩니다. React에서 라우팅을 관리하기 위해 가장 일반적으로 사용되는 라이브러리는 React-Router입니다. 이번 글은 React-Router 사용법에 대해 쓰려고 하는데, API만 소개하는 것은 너무 평범하고, 공식 문서도 이미 잘 작성되어 있으니 여기서는 일반적인 개발 시나리오를 참고하겠습니다. React-Router를 어떻게 사용하나요? 당사의 일반 시스템에는 사용자 액세스 권한이 제한되어 있으며 일부 페이지에서는 사용자에게 특정 액세스 권한이 필요할 수 있습니다. 이 기사에서는 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

要实现路由鉴权，我们还得一步一步来，我们先用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;

🎜 세 가지 역할이 더 있습니다: 🎜

• 🎜로그인되지 않은 사용자: 웹사이트 홈페이지 /index에만 액세스할 수 있습니다. > 및 로그인 페이지 /login🎜
• 🎜일반 사용자: 웹사이트 홈페이지 /index에 접속하여 로그인할 수 있습니다. 페이지 /login 및 백엔드 페이지 /backend🎜
• 🎜admin: 관리 페이지 /에 접근할 수 있습니다. admin 및 기타 모든 페이지🎜

🎜React-Router 소개🎜

🎜라우트 인증을 구현하려면 먼저 React-를 사용하여 단계별로 진행해야 합니다. 여러 페이지에 걸쳐 이 프로젝트를 사용하여 간단한 라우터를 구축하는 라우터입니다. create-react-app을 직접 사용하여 새 프로젝트를 만든 다음 pages 폴더를 만들고 앞서 언급한 페이지를 그 안에 넣습니다. 🎜🎜🎜 🎜우리 페이지를 먼저 작성하려면 간단합니다. 다음과 같이 제목을 먼저 작성하세요. 🎜🎜

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

🎜🎜다른 여러 페이지도 비슷합니다. 🎜🎜그런 다음 App.js에 React-Router를 도입하여 라우팅 점프를 수행할 수 있습니다. 우리는 브라우저 -dom에서 react-router를 사용하고 있습니다. code>의 새 버전인 <code>React-Router는 핵심 로직 레이어와 프레젠테이션 레이어를 분리하고, 핵심 로직은 경로 일치 등을 처리하고, 프레젠테이션 레이어는 실제 점프 및 경로 모니터링을 처리합니다. 이렇게 나누어진 이유는 React-Router가 브라우저뿐만 아니라 React Native도 지원해야 하기 때문입니다. 이 두 플랫폼의 모니터링과 점프가 다르기 때문에 이제 React- 라우터: 🎜🎜react-router: 핵심 논리 처리, 몇 가지 공통 기본 클래스 제공🎜🎜react-router-dom: 브라우저 관련 라우팅 모니터링 및 점프의 특정 구현🎜 🎜react-router-native: RN 관련 라우팅 모니터링 및 점핑을 구체적으로 구현합니다🎜🎜실제 사용에서는 일반적으로 react-router를 참조할 필요가 없지만 직접적으로 Just react-router-dom을 사용하세요. react-router 자체를 참조하기 때문입니다. 다음으로 프로젝트에 react-router-dom을 소개합니다. 🎜🎜

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>
  );
}

🎜🎜지금까지 우리의 애플리케이션은 다음과 같이 실행됩니다: 🎜🎜🎜🎜

模块划分

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

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

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

为了好管理这三种页面，我们可以将他们抽取成三个文件，放到一个独立的文件夹 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;

到这里我们这个简单的路由鉴权就完成了，具体跑起来效果如下：

Summary

• React-Router는 프런트 엔드 라우팅 점프를 관리하는 데 사용할 수 있습니다. React 생태계에서 매우 중요한 라이브러리입니다. React-Router 可以用来管理前端的路由跳转，是 React 生态里面很重要的一个库。

• React-Router 为了同时支持浏览器和 React-Native ，他分拆成了三个包 react-router 核心包， react-router-dom 浏览器包， react-router-native 支持 React-Native 。使用时不需要引入 react-router ，只需要引入需要的平台包就行。

• 对于需要不同权限的路由，我们可以将他们拎出来分好类，单独建成一个文件，如果路由不多，放在一个文件导出多个数组也行。

• 对于需要鉴权的路由，我们可以用一个高级组件将权限校验的逻辑封装在里面，其他页面只需要加好配置，完全不用关心鉴权的问题。

本文内容偏简单，作为熟悉React-Router

React-Router 브라우저와 React-Native를 모두 지원하기 위해 react-router 세 개의 패키지로 분할되었습니다. > code> 코어 패키지, react-router-dom 브라우저 패키지, react-router-native는 React-Native를 지원합니다. 사용할 때 react-router를 도입할 필요는 없습니다. 필요한 플랫폼 패키지만 도입하면 됩니다.

다른 권한이 필요한 경로의 경우 카테고리로 구분하여 별도의 파일로 만들 수 있습니다. 경로가 많지 않으면 하나의 파일에 넣고 여러 배열을 내보낼 수 있습니다.

🎜🎜인증이 필요한 경로의 경우 고급 구성 요소를 사용하여 권한 확인 논리를 캡슐화할 수 있습니다. 다른 페이지는 구성하기만 하면 되며 인증 문제에 대해 전혀 걱정할 필요가 없습니다. 🎜🎜이 글의 내용은 비교적 간단하지만, React-Router 사용법에 익숙한 분들에게는 나쁘지 않습니다. 그렇다면 우리는 그 원리도 알아야 합니다. 마음에 드셨다면 좋아요와 팔로우를 해주시면 됩니다! 🎜🎜추천 학습: "🎜react 비디오 튜토리얼🎜"🎜🎜

위 내용은 반응에서 여러 페이지 사이를 이동하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!