React 앱에서 리치 라우터를 사용하기 위한 빠른 시작

마지막 프로젝트에서 Reach Router를 사용했는데 React 앱에서 라우팅 하는 가장 간단한 방법이라고 생각합니다.

과거에 사용했던 또 다른 라우터인 React Router보다 훨씬 쉽다고 생각합니다.

다음은 기본 사항을 익히는 5 분 자습서입니다.

설치 

먼저 다음을 사용하여 설치하십시오.

npm install @reach/router

@ 구문이 처음 인 경우 범위가 지정된 패키지를 허용하는 것은 npm 기능입니다. 다시 말해 네임 스페이스입니다.

그런 다음 프로젝트에서 가져옵니다.

import { Router } from '@reach/router'

기본 사용법 

최상위 React 파일 인 create-react-app 설치의 index.js에서 사용하고 싶은 모든 구성 요소를 래핑합니다.

ReactDOM.render(
  <Router>
    <Form path="/" />
    <PrivateArea path="/private-area" />
  </Router>,
  document.getElementById('root')
)

구성 요소에 추가 한 path 속성을 사용하면 구성 요소의 경로를 설정할 수 있습니다.

즉, 브라우저 URL 표시 줄에 해당 경로를 입력하면 도달 라우터가 해당 특정 구성 요소를 나에게 보여줍니다.

/ 경로는 색인 경로이며 앱 도메인 옆에 URL / 경로를 설정하지 않으면 나타납니다. 다시 말해“홈페이지”입니다.

기본 경로 

사용자가 경로와 일치하지 않는 URL을 방문하면 기본적으로 도달 라우터는 / 경로로 리디렉션됩니다. 이 경우를 처리하기 위해 기본 경로를 추가하고 대신 멋진 "404"메시지를 표시 할 수 있습니다.

<Router>
  <Form path="/" />
  <PrivateArea path="/private-area" />
  <NotFound default />
</Router>

프로그래밍 방식으로 경로 변경 

탐색 기능을 사용하여 앱에서 경로를 프로그래밍 방식으로 변경하십시오.

import { navigate } from '@reach/router'

navigate('/private-area')

JSX의 경로로 연결 

JSX를 사용하여 경로에 링크하려면 Link 구성 요소를 사용하십시오.

import { Link } from '@reach/router'

<Link to="/">Home</Link>
<Link to="/private-area">Private Area</Link>

URL 매개 변수 

:param 구문을 사용하여 매개 변수를 추가하십시오.

<Router>
  <User path="users/:userId" />
</Router>

이제 이 가상의 사용자 컴포넌트에서 userId를 prop으로 가져올 수 있습니다.

const User = ({ userId }) => (
  <p>User {userId}</p>
)

중첩 된 경로 

최상위 React 파일에서 경로를 이러한 방식으로 정의하는 방법을 보여주었습니다.

<Router>
  <Form path="/" />
  <PrivateArea path="/private-area" />
</Router>

중첩 된 경로를 정의 할 수 있습니다.

<Router>
  <Form path="/" />
  <PrivateArea path="/private-area">
    <User path=":userId" />
  </PrivateArea>
</Router>

이제 /private-area/23232 링크가 User 구성 요소를 가리 키도록 하여 userId 23232를 전달할 수 있습니다.

구성 요소가 내부에 자체 경로를 정의하도록 허용 할 수도 있습니다. 경로 뒤에 / * 와일드 카드를 사용하십시오.

<Router>
  <Form path="/" />
  <PrivateArea path="/private-area/*" />
</Router>

그런 다음 구성 요소 내에서 라우터를 다시 가져오고 자체 하위 라우팅 세트를 정의 할 수 있습니다.

//component PrivateArea
<Router>
  <User path="/:userId" />
</router>

/private-area/something을 사용하는 모든 경로는 사용자 구성 요소에 의해 처리되며 경로 뒤의 부분은 userId prop으로 전송됩니다.

/private-area 경로에 무언가를 표시하려면 PrivateArea 구성 요소에 / 핸들러도 추가해야 합니다.

//component PrivateArea
<Router>
  <User path="/:userId" />
  <PrivateAreaDashboard path="/" />
</router>