반응 라우터 React의 사실상의 표준 라우팅 라이브러리입니다. 여러 보기가 있는 React 애플리케이션을 탐색해야 하는 경우 URL을 관리하기 위한 라우터가 필요합니다. React Router가 이를 처리하여 애플리케이션 UI와 URL을 동기화 상태로 유지합니다.

이 튜토리얼에서는 React Router v5와 이를 사용하여 수행할 수 있는 많은 작업을 소개합니다.

개요

React는 클라이언트 측에서 렌더링되는 SPA(단일 페이지 애플리케이션)를 만드는 데 널리 사용되는 라이브러리입니다. SPA는 여러 개를 가질 수 있습니다. 보기 (일명 페이지), 기존의 다중 페이지 앱과 달리 이러한 보기를 탐색해도 전체 페이지가 다시 로드되지 않아야 합니다. 대신, 뷰가 현재 페이지 내에서 인라인으로 렌더링되기를 원합니다. 다중 페이지 앱에 익숙한 최종 사용자는 SPA에 다음과 같은 기능이 있을 것으로 기대합니다.

• 애플리케이션의 각 보기에는 해당 보기를 고유하게 지정하는 URL이 있어야 합니다. 이는 사용자가 나중에 참조할 수 있도록 URL을 북마크할 수 있도록 하기 위한 것입니다. 예를 들어, www.example.com/products.
• 브라우저의 뒤로 및 앞으로 버튼이 예상대로 작동해야 합니다.
• 동적으로 생성된 중첩된 보기에는 고유한 URL도 있어야 합니다. 예를 들어, example.com/products/shoes/101, 여기서 101은 제품 ID입니다.

라우팅 페이지에서 렌더링되는 내용과 브라우저 URL을 동기화 상태로 유지하는 프로세스입니다. React Router를 사용하면 라우팅을 처리할 수 있습니다. 선언적으로. 선언적 라우팅 접근 방식을 사용하면 "경로는 다음과 같아야 합니다"라고 말함으로써 애플리케이션의 데이터 흐름을 제어할 수 있습니다.

<Route path="/about" component={About} />

당신은 배치 할 수 있습니다 <Route> 경로를 렌더링하려는 모든 구성 요소. 부터 <Route>, <Link> 그리고 우리가 다룰 다른 모든 React Router API는 구성 요소일 뿐이므로 React에서 라우팅에 쉽게 익숙해질 수 있습니다.

시작하기 전에 메모. React Router가 Facebook에서 개발한 공식 라우팅 솔루션이라는 일반적인 오해가 있습니다. 실제로는 디자인과 단순성으로 널리 알려진 타사 라이브러리입니다. 요구 사항이 탐색용 라우터로 제한되는 경우 큰 번거로움 없이 처음부터 사용자 지정 라우터를 구현할 수 있습니다. 그러나 React Router의 기본 사항을 이해하면 라우터 작동 방식에 대한 더 나은 통찰력을 얻을 수 있습니다.

살펴보기

이 자습서는 여러 섹션으로 나뉩니다. 먼저 npm을 사용하여 React 및 React Router를 설정합니다. 그런 다음 React Router 기본 사항으로 바로 이동합니다. 작동 중인 React Router의 다양한 코드 데모를 볼 수 있습니다. 이 자습서에서 다루는 예제는 다음과 같습니다.

1. 기본 탐색 라우팅
2. 중첩 라우팅
3. 경로 매개변수를 사용한 중첩 라우팅
4. 보호 라우팅

이러한 경로를 구축하는 것과 관련된 모든 개념은 그 과정에서 논의될 것입니다. 프로젝트의 전체 코드는 다음에서 사용할 수 있습니다. 이 GitHub 레포. 특정 데모 디렉토리 안에 있으면 다음을 실행하십시오. npm install 종속성을 설치합니다. 개발 서버에서 애플리케이션을 제공하려면 다음을 실행하십시오. npm start 그리고 향한다 http://localhost:3000/ 실제 데모를 보려면

시작하자!

반응 라우터 설정

이미 개발 환경이 설정되어 실행 중이라고 가정합니다. 그렇지 않은 경우 "로 이동하십시오.React 및 JSX 시작하기". 또는 다음을 사용할 수 있습니다. 반응 앱 만들기 기본 React 프로젝트를 만드는 데 필요한 파일을 생성합니다. 이것은 Create React App에서 생성된 기본 디렉토리 구조입니다.

 react-router-demo ├── .gitignore ├── package.json ├── public │ ├── favicon.ico │ ├── index.html │ └── manifest.json ├── README.md ├── src │ ├── App.css │ ├── App.js │ ├── App.test.js │ ├── index.css │ ├── index.js │ ├── logo.svg │ └── registerServiceWorker.js └── yarn.lock

React Router 라이브러리는 세 가지 패키지로 구성됩니다. react-router, react-router-dom및 react-router-native. react-router 라우터의 핵심 패키지인 반면 다른 두 개는 환경에 따라 다릅니다. 당신은 사용해야 react-router-dom 웹사이트를 구축하고 있다면 react-router-native React Native를 사용하는 모바일 앱 개발 환경에 있는 경우.

npm을 사용하여 설치 react-router-dom:

npm install --save react-router-dom

React 라우터 기본 사항

경로가 표시되는 예는 다음과 같습니다.

<Router>/* App component */
class App extends React.Component { render() { return ( <div> <nav className="navbar navbar-light"> <ul className="nav navbar-nav"> /* Link components are used for linking to other views */ <li> <Link to="/">Homes</Link> </li> <li> <Link to="/category">Category</Link> </li> <li> <Link to="/products">Products</Link> </li> </ul> </nav> /* Route components are rendered if the path prop matches the current URL*/ <Route path="/" component={Home} /> <Route path="/category" component={Category} /> <Route path="/products" component={Products} /> </div> ); }
} <Route exact path="/" component={Home} /> <Route path="/category" component={Category} /> <Route path="/login" component={Login} /> <Route path="/products" component={Products} />
</Router>

라우터

위에서 예시한 것처럼 기본 경로를 설정하려면 라우터 구성 요소와 여러 경로 구성 요소가 필요합니다. 브라우저 기반 애플리케이션을 구축하고 있으므로 React Router API에서 두 가지 유형의 라우터를 사용할 수 있습니다.

1. <BrowserRouter>
2. <HashRouter>

그들 사이의 주요 차이점은 그들이 생성하는 URL에서 분명합니다.

// <BrowserRouter>
http://example.com/about // <HashRouter>
http://example.com/#/about

XNUMXD덴탈의 <BrowserRouter> HTML5 History API를 사용하여 라우터 기록을 추적하기 때문에 둘 사이에서 더 많이 사용됩니다. 그만큼 <HashRouter>, 반면에 URL의 해시 부분(window.location.hash) 일을 기억합니다. 레거시 브라우저를 지원하려는 경우 <HashRouter>.

포장 <BrowserRouter> App 구성 요소 주위의 구성 요소.

index.js

/* Import statements */
import React from "react";
import ReactDOM from "react-dom"; /* App is the entry point to the React code.*/
import App from "./App"; /* import BrowserRouter from 'react-router-dom' */
import { BrowserRouter } from "react-router-dom"; ReactDOM.render( <BrowserRouter> <App /> </BrowserRouter>, document.getElementById("root")
);

참고: 라우터 구성 요소는 단일 하위 요소만 가질 수 있습니다. 자식 요소는 div와 같은 HTML 요소이거나 반응 구성 요소일 수 있습니다.

React Router가 작동하려면 다음에서 관련 API를 가져와야 합니다. react-router-dom 도서관. 여기에서 수입했습니다 BrowserRouter 으로 index.js. 수입도 했습니다 App 구성 요소 App.js. App.js는 짐작하셨겠지만 React 구성 요소의 진입점입니다.

위의 코드는 전체 앱 구성 요소에 대한 기록 인스턴스를 만듭니다. 역사를 정식으로 소개하겠습니다.

history

history JavaScript가 실행되는 모든 곳에서 세션 기록을 쉽게 관리할 수 있는 JavaScript 라이브러리입니다. history 기록 스택을 관리하고, 탐색하고, 탐색을 확인하고, 세션 간에 상태를 유지할 수 있는 최소한의 API를 제공합니다. — 반응 교육 문서

각 라우터 구성요소는 현재 위치(history.location) 및 스택의 이전 위치. 현재 위치가 변경되면 보기가 다시 렌더링되고 탐색 감각을 갖게 됩니다. 현재 위치는 어떻게 변경됩니까? history 개체에는 다음과 같은 메서드가 있습니다. history.push() 및 history.replace() 그것을 처리하기 위해. history.push() 클릭하면 호출됩니다. <Link> 구성 요소 및 history.replace() 사용할 때 호출됩니다. <Redirect>. 기타 방법 — 예: history.goBack() 및 history.goForward() — 페이지를 뒤로 또는 앞으로 이동하여 기록 스택을 탐색하는 데 사용됩니다.

계속해서 링크와 경로가 있습니다.

링크 및 경로

XNUMXD덴탈의 <Route> 컴포넌트는 React 라우터에서 가장 중요한 컴포넌트입니다. 현재 위치가 경로의 경로와 일치하면 일부 UI를 렌더링합니다. 이상적으로는 <Route> 컴포넌트에는 이름이 지정된 소품이 있어야 합니다. path, 경로 이름이 현재 위치와 일치하면 렌더링됩니다.

XNUMXD덴탈의 <Link> 반면 구성 요소는 페이지 간을 탐색하는 데 사용됩니다. HTML 앵커 요소와 비슷합니다. 그러나 앵커 링크를 사용하면 브라우저가 새로 고쳐지므로 원하지 않습니다. 따라서 대신 사용할 수 있습니다. <Link> 특정 URL로 이동하고 브라우저를 새로 고치지 않고 보기를 다시 렌더링할 수 있습니다.

기본 라우터를 만들기 위해 알아야 할 모든 것을 다루었습니다. 하나 만들어 봅시다.

데모 1: 기본 라우팅

src / App.js

/* Import statements */
import React, { Component } from "react";
import { Link, Route, Switch } from "react-router-dom"; /* Home component */
const Home = () => ( <div> <h2>Home</h2> </div>
); /* Category component */
const Category = () => ( <div> <h2>Category</h2> </div>
); /* Products component */
const Products = () => ( <div> <h2>Products</h2> </div>
); export default function App() { return ( <div> <nav className="navbar navbar-light"> <ul className="nav navbar-nav"> <li> <Link to="/">Homes</Link> </li> <li> <Link to="/category">Category</Link> </li> <li> <Link to="/products">Products</Link> </li> </ul> </nav> /* Route components are rendered if the path prop matches the current URL */ <Route path="/" component={Home} /> <Route path="/category" component={Category} /> <Route path="/products" component={Products} /> </div> );
}

내부에 Home, Category 및 Products에 대한 구성 요소를 선언했습니다. App.js. 지금은 괜찮지만 구성 요소가 커지기 시작하면 각 구성 요소에 대해 별도의 파일을 만드는 것이 좋습니다. 일반적으로 구성 요소가 10줄 이상의 코드를 차지하는 경우 일반적으로 구성 요소에 대한 새 파일을 만듭니다. 두 번째 데모부터 시작하여 너무 커져서 App.js 파일.

앱 구성 요소 내에서 라우팅을 위한 논리를 작성했습니다. 그만큼 <Route>의 경로가 현재 위치와 일치하고 구성 요소가 렌더링됩니다. 렌더링해야 하는 구성 요소는 두 번째 소품으로 전달됩니다.

여기에 / 둘 다 일치 / 및 /category. 따라서 두 경로가 일치하고 렌더링됩니다. 어떻게 피합니까? 당신은 통과해야 exact= {true} 라우터에 소품 path='/':

<Route exact={true} path="/" component={Home} />

경로가 정확히 동일한 경우에만 경로를 렌더링하려면 정확한 소품을 사용해야 합니다.

중첩 라우팅

중첩된 경로를 만들려면 방법을 더 잘 이해해야 합니다. <Route> 공장. 그걸하자.

<Route> 에는 렌더링되는 항목을 정의하는 데 사용할 수 있는 세 가지 소품이 있습니다.

• 구성 요소. 우리는 이미 이것을 실제로 보았습니다. URL이 일치하면 라우터는 다음을 사용하여 주어진 구성 요소에서 React 요소를 생성합니다. React.createElement.
• 주다. 이는 인라인 렌더링에 유용합니다. render prop은 위치가 경로의 경로와 일치할 때 요소를 반환하는 함수를 기대합니다.
• 어린이. children prop은 React 요소를 반환하는 함수를 기대한다는 점에서 render와 유사합니다. 그러나 자식은 경로가 위치와 일치하는지 여부에 관계없이 렌더링됩니다.

경로 및 일치

XNUMXD덴탈의 통로 라우터가 일치해야 하는 URL 부분을 식별하는 데 사용됩니다. Path-to-RegExp 라이브러리를 사용하여 경로 문자열을 정규식으로 바꿉니다. 그러면 현재 위치와 일치합니다.

라우터의 경로와 위치가 성공적으로 일치하면 객체가 생성되며 이를 일치 물체. 일치 개체는 URL 및 경로에 대한 자세한 정보를 전달합니다. 이 정보는 아래 나열된 속성을 통해 액세스할 수 있습니다.

• match.url. URL의 일치 부분을 반환하는 문자열입니다. 이는 특히 중첩 빌드에 유용합니다. <Link>s
• match.path. 경로의 경로 문자열을 반환하는 문자열 — 즉, <Route path="">. 우리는 이것을 사용하여 중첩을 만들 것입니다. <Route>s.
• match.isExact. 일치 항목이 정확한 경우(후행 문자 없이) true를 반환하는 부울입니다.
• match.params. Path-to-RegExp 패키지에 의해 구문 분석된 URL의 키/값 쌍을 포함하는 개체입니다.

이제 우리는 <Route>s, 중첩 경로가 있는 라우터를 구축해 봅시다.

스위치 부품

데모 코드로 이동하기 전에 다음을 소개하고 싶습니다. <Switch> 요소. 여러 때 <Route>s가 함께 사용되면 일치하는 모든 경로가 포괄적으로 렌더링됩니다. 데모 1의 이 코드를 고려하십시오. 이유를 설명하기 위해 새 경로를 추가했습니다. <Switch> 유용합니다:

<Route exact path="/" component={Home}/>
<Route path="/products" component={Products}/>
<Route path="/category" component={Category}/>
<Route path="/:id" render = {()=> (<p> I want this text to show up for all routes other than '/', '/products' and '/category' </p>)}/>

URL이 /products, 위치와 일치하는 모든 경로 /products 렌더링됩니다. 그래서 <Route> 경로 포함 :id 함께 렌더링됩니다. Products 요소. 이것은 의도적으로 설계된 것입니다. 그러나 이것이 예상한 동작이 아닌 경우 다음을 추가해야 합니다. <Switch> 귀하의 경로에 대한 구성 요소. 와 함께 <Switch>, 첫 아이만 <Route> 위치와 일치하는 항목이 렌더링됩니다.

데모 2: 중첩 라우팅

이전에 우리는 다음을 위한 경로를 만들었습니다. /, /category 및 /products. 형식의 URL을 원하면 어떻게 될까요? /category/shoes?

src / App.js

import React, { Component } from "react";
import { Link, Route, Switch } from "react-router-dom";
import Category from "./Category"; export default function App() { return ( <div> <nav className="navbar navbar-light"> <ul className="nav navbar-nav"> <li> <Link to="/">Homes</Link> </li> <li> <Link to="/category">Category</Link> </li> <li> <Link to="/products">Products</Link> </li> </ul> </nav> <Switch> <Route exact path="/" component={Home} /> <Route path="/category" component={Category} /> <Route path="/products" component={Products} /> </Switch> </div> );
} /* Code for Home and Products component omitted for brevity */

이전 버전의 React Router와 달리 버전 4 이하에서는 중첩된 <Route>s는 바람직하게는 부모 구성 요소 내부로 들어가야 합니다. 즉, 여기에서는 Category 구성 요소가 부모이며 다음 경로를 선언할 것입니다. category/:name 부모 구성 요소 내부.

src/Category.jsx

import React from "react";
import { Link, Route } from "react-router-dom"; const Category = ({ match }) => { return ( <div> {" "} <ul> <li> <Link to={`${match.url}/shoes`}>Shoes</Link> </li> <li> <Link to={`${match.url}/boots`}>Boots</Link> </li> <li> <Link to={`${match.url}/footwear`}>Footwear</Link> </li> </ul> <Route path={`${match.path}/:name`} render={({ match }) => ( <div> {" "} <h3> {match.params.name} </h3> </div> )} /> </div> );
};
export default Category;

먼저 중첩 경로에 대한 몇 가지 링크를 선언했습니다. 앞서 언급한 바와 같이, match.url 중첩 링크를 구축하는 데 사용되며 match.path 중첩 경로의 경우. 일치의 개념을 이해하는 데 어려움이 있는 경우, console.log(match) 이를 명확히 하는 데 도움이 될 수 있는 몇 가지 유용한 정보를 제공합니다.

<Route path={`${match.path}/:name`} render={({ match }) => ( <div> <h3> {match.params.name} </h3> </div> )}
/>

이것은 동적 라우팅에 대한 첫 번째 시도입니다. 경로를 하드 코딩하는 대신 경로 이름 내에 변수를 사용했습니다. :name 경로 매개변수이며 이후의 모든 항목을 포착합니다. category/ 다른 슬래시가 나타날 때까지. 따라서 다음과 같은 경로 이름 products/running-shoes ~을 만들 것입니다. params 다음과 같이 객체 :

{ name: "running-shoes";
}

캡처된 데이터는 다음에서 액세스할 수 있어야 합니다. match.params or props.match.params 소품이 전달되는 방식에 따라. 다른 흥미로운 점은 우리가 render 소품. render props는 자체 구성 요소가 필요하지 않은 인라인 함수에 매우 편리합니다.

데모 3: 경로 매개변수를 사용한 중첩 라우팅

좀 더 복잡하게 해볼까요? 실제 라우터는 데이터를 처리하고 동적으로 표시해야 합니다. 아래 형식의 서버 API에서 반환된 제품 데이터가 있다고 가정합니다.

src/Products.jsx

const productData = [ { id: 1, name: "NIKE Liteforce Blue Sneakers", description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin molestie.", status: "Available", }, { id: 2, name: "Stylised Flip Flops and Slippers", description: "Mauris finibus, massa eu tempor volutpat, magna dolor euismod dolor.", status: "Out of Stock", }, { id: 3, name: "ADIDAS Adispree Running Shoes", description: "Maecenas condimentum porttitor auctor. Maecenas viverra fringilla felis, eu pretium.", status: "Available", }, { id: 4, name: "ADIDAS Mid Sneakers", description: "Ut hendrerit venenatis lacus, vel lacinia ipsum fermentum vel. Cras.", status: "Out of Stock", },
];

다음 경로에 대한 경로를 만들어야 합니다.

• /products. 그러면 제품 목록이 표시됩니다.
• /products/:productId. 있는 제품의 경우 :productId 존재하는 경우 제품 데이터를 표시하고, 존재하지 않는 경우 오류 메시지를 표시해야 합니다.

src/Products.jsx

/* Import statements have been left out for code brevity */ const Products = ({ match }) => { const productsData = [ { id: 1, name: "NIKE Liteforce Blue Sneakers", description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin molestie.", status: "Available", }, //Rest of the data has been left out for code brevity ]; /* Create an array of `<li>` items for each product */ const linkList = productsData.map((product) => { return ( <li> <Link to={`${match.url}/${product.id}`}>{product.name}</Link> </li> ); }); return ( <div> <div> <div> <h3> Products</h3> <ul> {linkList} </ul> </div> </div> <Route path={`${match.url}/:productId`} render={(props) => <Product data={productsData} {...props} />} /> <Route exact path={match.url} render={() => <div>Please select a product.</div>} /> </div> );
};

먼저 목록을 만들었습니다. <Links>사용하여 productsData.ids에 저장 linkList. 경로는 제품 ID에 해당하는 경로 문자열의 매개변수를 사용합니다.

<Route path={`${match.url}/:productId`} render={(props) => <Product data={productsData} {...props} />}
/>

당신은 예상했을 수 있습니다 component = { Product } 인라인 렌더링 기능 대신. 문제는 우리가 계승해야 한다는 것입니다. productsData 모든 기존 소품과 함께 제품 구성 요소에. 이 작업을 수행할 수 있는 다른 방법이 있지만 이 방법이 가장 쉽다고 생각합니다. {...props} ES6를 사용 확산 구문 전체 소품 개체를 구성 요소에 전달합니다.

다음은 제품 구성 요소에 대한 코드입니다.

src/Product.jsx

/* Import statements have been left out for code brevity */ const Product = ({ match, data }) => { var product = data.find(p => p.id == match.params.productId); var productData; if (product) productData = ( <div> <h3> {product.name} </h3> <p>{product.description}</p> <hr /> <h4>{product.status}</h4>{" "} </div> ); else productData = <h2> Sorry. Product doesn't exist </h2>; return ( <div> <div>{productData}</div> </div> );
};

XNUMXD덴탈의 find 메서드는 다음과 같은 ID 속성을 가진 객체에 대한 배열을 검색하는 데 사용됩니다. match.params.productId. 제품이 존재하는 경우, productData 이 표시됩니다. 그렇지 않은 경우 "제품이 존재하지 않습니다" 메시지가 렌더링됩니다.

경로 보호

최종 데모에서는 경로 보호와 관련된 기술에 대해 논의할 것입니다. 따라서 누군가 접근을 시도하면 /admin, 먼저 로그인해야 합니다. 그러나 경로를 보호하기 전에 다루어야 할 몇 가지 사항이 있습니다.

리디렉션

서버측 리디렉션과 마찬가지로 <Redirect> 기록 스택의 현재 위치를 새 위치로 바꿉니다. 새 위치는 to 소품. 사용 방법은 다음과 같습니다. <Redirect>:

<Redirect to={{pathname: '/login', state: {from: props.location}}}

따라서 누군가가 액세스를 시도하면 /admin 로그아웃하는 동안 다음으로 리디렉션됩니다. /login 노선. 현재 위치에 대한 정보는 상태를 통해 전달되므로 인증에 성공하면 사용자를 원래 위치로 다시 리디렉션할 수 있습니다. 자식 구성 요소 내에서 이 정보에 액세스할 수 있습니다. this.props.location.state.

맞춤 경로

사용자 지정 경로는 구성 요소 내부에 중첩된 경로에 대한 멋진 단어입니다. 경로를 렌더링할지 여부를 결정해야 하는 경우 사용자 지정 경로를 작성하는 것이 좋습니다. 다음은 다른 경로 중에서 선언된 사용자 지정 경로입니다.

src / App.js

/* Add the PrivateRoute component to the existing Routes */
<nav className="navbar navbar-light"> <ul className="nav navbar-nav"> ... <li><Link to="/admin">Admin area</Link></li> </ul>
</nav> <Switch> <Route exact path="/" component={Home} data={data} /> <Route path="/category" component={Category} /> <Route path="/login" component={Login} /> <PrivateRoute path="/admin" component={Admin} /> <Route path="/products" component={Products} />
</Switch>

fakeAuth.isAuthenticated 사용자가 로그인되어 있으면 true를 반환하고 그렇지 않으면 false를 반환합니다.

PrivateRoute에 대한 정의는 다음과 같습니다.

src / App.js

/* PrivateRoute component definition */
const PrivateRoute = ({ component: Component, ...rest }) => { return ( <Route {...rest} render={props => fakeAuth.isAuthenticated === true ? ( <Component {...props} /> ) : ( <Redirect to={{ pathname: "/login", state: { from: props.location } }} /> ) } /> );
};

경로는 사용자가 로그인한 경우 관리 구성 요소를 렌더링합니다. 그렇지 않으면 사용자는 다음으로 리디렉션됩니다. /login. 이 접근 방식의 좋은 점은 분명히 더 선언적이고 PrivateRoute 재사용이 가능합니다.

마지막으로 로그인 구성 요소에 대한 코드는 다음과 같습니다.

src/Login.jsx

import React, { useState } from "react";
import { Redirect } from "react-router-dom"; export default function Login(props) { const { from } = props.location.state || { from: { pathname: "/" } }; console.log(from); const [redirectToReferrer, setRedirectToReferrer] = useState(false); const login = () => { fakeAuth.authenticate(() => { setRedirectToReferrer(true); }); }; if (redirectToReferrer) { return <Redirect to={from} />; } return ( <div> <p>You must log in to view the page at {from.pathname}</p> <button onClick={login}>Log in</button> </div> );
} /* A fake authentication function */
export const fakeAuth = { isAuthenticated: false, authenticate(cb) { this.isAuthenticated = true; setTimeout(cb, 100); }
};

아래 줄은 객체 파괴, ES6 사양의 일부입니다.

const { from } = this.props.location.state || { from: { pathname: "/" } };

퍼즐 조각을 맞춰볼까요? 다음은 React 라우터를 사용하여 구축한 애플리케이션의 최종 데모입니다.

데모 4: 경로 보호

요약

이 기사에서 본 것처럼 React Router는 더 나은 선언적 경로를 구축하기 위해 React를 보완하는 강력한 라이브러리입니다. 이전 버전의 React Router와 달리 v5에서는 모든 것이 "단순한 구성 요소"입니다. 게다가 새로운 디자인 패턴은 React의 작업 방식에 완벽하게 들어맞습니다.

이 자습서에서는 다음을 배웠습니다.

• React Router 설정 및 설치 방법
• 라우팅의 기본 사항 및 다음과 같은 몇 가지 필수 구성 요소 <Router>, <Route> 및 <Link>
• 내비게이션 및 중첩 경로를 위한 최소 라우터를 만드는 방법
• 경로 매개변수로 동적 경로를 구축하는 방법

마지막으로 보호 경로에 대한 최종 데모를 만들기 위한 몇 가지 고급 라우팅 기술을 배웠습니다.

출처: https://www.sitepoint.com/react-router-complete-guide/?utm_source=rss