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 id="管理员页面">管理员页面</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 id="首页">首页</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 id="登录页">登录页</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 중국어 웹사이트의 기타 관련 기사를 참조하세요!

HTML 및 React는 JSX를 통해 완벽하게 통합하여 효율적인 사용자 인터페이스를 구축 할 수 있습니다. 1) JSX를 사용하여 HTML 요소를 포함시킵니다. 2) Virtual DOM을 사용하여 렌더링 성능을 최적화, 3) 구성 요소화를 통해 HTML 구조를 관리하고 렌더링합니다. 이 통합 방법은 직관적 일뿐 만 아니라 응용 프로그램 성능을 향상시킵니다.

상태 및 소품을 통해 데이터를 효율적으로 렌더링하고 합성 이벤트 시스템을 통해 사용자 이벤트를 처리합니다. 1) usestate를 사용하여 카운터 예제와 같은 상태를 관리하십시오. 2) 버튼 클릭과 같은 JSX에 함수를 추가하여 이벤트 처리가 구현됩니다. 3) Todolist 구성 요소와 같은 목록을 렌더링하려면 주요 속성이 필요합니다. 4) 양식 처리의 경우 양식 구성 요소와 같은 usestate 및 e.preventDefault ().

반응은 HTTP 요청을 통해 서버와 상호 작용하여 데이터를 획득, 전송, 업데이트 및 삭제합니다. 1) 사용자 작동 이벤트 트리거, 2) HTTP 요청 시작, 3) 프로세스 서버 응답, 4) 구성 요소 상태 및 재 렌더 업데이트.

React는 구성 요소 개발 및 가상 DOM을 통해 효율성을 향상시키는 사용자 인터페이스를 구축하기위한 JavaScript 라이브러리입니다. 1. 구성 요소 및 JSX : JSX 구문을 사용하여 구성 요소를 정의하여 코드 직관과 품질을 향상시킵니다. 2. 가상 DOM 및 렌더링 : 가상 DOM 및 DIFF 알고리즘을 통해 렌더링 성능을 최적화합니다. 3. 상태 관리 및 고리 : usestate 및 useffect와 같은 후크는 상태 관리 및 부작용 처리를 단순화합니다. 4. 사용의 예 : 기본 양식에서 고급 글로벌 주 관리에 이르기까지 ContextApi를 사용하십시오. 5. 일반적인 오류 및 디버깅 : 부적절한 상태 관리 및 구성 요소 업데이트 문제를 피하고 ReactDevTools를 사용하여 디버그를 사용하십시오. 6. 성능 최적화 및 최적 성

Reactisafrontendlibrary, FocusedOnBuildingUserInterfaces.itmanagesUistateAndatesefficiplyingavirtudom 및 BackingServicesViaApforDataHandling, ButDoessorsorstoredAtaitiate 스스로.

RECT는 HTML에 내장되어 기존 HTML 페이지를 향상 시키거나 완전히 다시 작성할 수 있습니다. 1) RECT를 사용하기위한 기본 단계에는 HTML에 루트 DIV를 추가하고 ReactDom.render ()를 통해 React 구성 요소를 렌더링하는 것이 포함됩니다. 2) 더 고급 응용 프로그램에는 usestate를 사용하여 상태를 관리하고 카운터 및 할 일 목록과 같은 복잡한 UI 상호 작용을 구현하는 것이 포함됩니다. 3) 최적화 및 모범 사례에는 코드 세분화, 게으른 하중 및 React.Memo 및 Usememo 사용이 포함됩니다. 이러한 방법을 통해 개발자는 React의 힘을 활용하여 동적 및 반응 형 사용자 인터페이스를 구축 할 수 있습니다.

React는 현대적인 프론트 엔드 애플리케이션을 구축하기위한 JavaScript 라이브러리입니다. 1. 구성 요소 및 가상 DOM을 사용하여 성능을 최적화합니다. 2. 구성 요소는 JSX를 사용하여 데이터를 관리하기 위해 정의, 상태 및 속성을 정의합니다. 3. 고리는 수명주기 관리를 단순화합니다. 4. ContextApi를 사용하여 글로벌 상태를 관리하십시오. 5. 일반적인 오류는 디버깅 상태 업데이트 및 수명주기가 필요합니다. 6. 최적화 기술에는 메모 화, 코드 분할 및 가상 스크롤이 포함됩니다.

React의 미래는 궁극적 인 구성 요소 개발, 성능 최적화 및 다른 기술 스택과의 깊은 통합에 중점을 둘 것입니다. 1) RECT는 구성 요소의 생성 및 관리를 더욱 단순화하고 궁극적 인 구성 요소 개발을 촉진합니다. 2) 성능 최적화는 특히 대규모 응용 프로그램에서 초점이됩니다. 3) React는 개발 경험을 향상시키기 위해 GraphQL 및 TypeScript와 같은 기술과 깊이 통합 될 것입니다.


핫 AI 도구

Undresser.AI Undress
사실적인 누드 사진을 만들기 위한 AI 기반 앱

AI Clothes Remover
사진에서 옷을 제거하는 온라인 AI 도구입니다.

Undress AI Tool
무료로 이미지를 벗다

Clothoff.io
AI 옷 제거제

Video Face Swap
완전히 무료인 AI 얼굴 교환 도구를 사용하여 모든 비디오의 얼굴을 쉽게 바꾸세요!

인기 기사

뜨거운 도구

SublimeText3 중국어 버전
중국어 버전, 사용하기 매우 쉽습니다.

안전한 시험 브라우저
안전한 시험 브라우저는 온라인 시험을 안전하게 치르기 위한 보안 브라우저 환경입니다. 이 소프트웨어는 모든 컴퓨터를 안전한 워크스테이션으로 바꿔줍니다. 이는 모든 유틸리티에 대한 액세스를 제어하고 학생들이 승인되지 않은 리소스를 사용하는 것을 방지합니다.

메모장++7.3.1
사용하기 쉬운 무료 코드 편집기

Eclipse용 SAP NetWeaver 서버 어댑터
Eclipse를 SAP NetWeaver 애플리케이션 서버와 통합합니다.

SublimeText3 Linux 새 버전
SublimeText3 Linux 최신 버전
