내가 조금 뒤쳐져 있다는 것을 알고 있지만 몇 달 전에 React-Router는 API에 hooks을 도입한 새로운 업데이트를 발표했습니다.

이 업데이트를 통해 사용자는 라우터 상태에 액세스하고 useHistory , useParams , useLocation 및 useRouteMatch 후크를 사용하여 내부 구성 요소에서 탐색을 수행할 수 있습니다.

오늘은 각 후크에 대한 간략한 개요와 경로 작성 방식이 어떻게 바뀌었는지 알려 드리겠습니다.

사용내역

useHistory 후크를 사용하면 경로를 탐색하는 데 사용할 수 있는 history 개체에 액세스할 수 있습니다.

import { useHistory } from "react-router-dom"

const Homepage = () => {
  let history = useHistory()

  function goBack(){
    history.goBack()
  }

  function goHome(){
    history.push('/')
  } 

  return(
    <div>
      <button onClick={goBack}>Previous</button>
      <button onClick={goHome}>Home</button>
    </div>
 )
}

export default Homepage

history 개체는 다음 속성 및 메서드에 대한 액세스를 제공합니다.

길이 - (숫자) 기록 스택의 항목 수

작업 - (문자열) 현재 작업(PUSH, REPLACE 또는 POP)

location - (객체) 현재 위치입니다. 다음과 같은 속성을 가질 수 있습니다.

경로명 - (문자열) URL의 경로

검색 - (문자열) URL 쿼리 문자열

해시 - (문자열) URL 해시 조각

상태 - (객체) 예를 들어 이 위치가 스택에 푸시되었을 때 push(경로, 상태). 브라우저 및 메모리 기록에서만 사용할 수 있습니다.

push(경로, [상태]) - (함수) 기록 스택에 새 항목을 푸시합니다.

replace(경로, [상태]) - (함수) 기록 스택의 현재 항목을 바꿉니다

.

go(n) - (함수) n 항목만큼 기록 스택의 포인터를 이동합니다.

goBack() - (함수) go(-1)

와 동일

goForward() - (함수) go(1)과 동일

블록(프롬프트) - (함수) 탐색 방지

useParams

useParams 후크를 사용하면 주어진 경로의 매개변수에 액세스할 수 있습니다. 매개변수는 동적으로 설정되는 주어진 URL의 매개변수일 뿐입니다.
useParams 후크가 React-Router에 의해 도입되기 전에 다음과 같이 구성 요소에 전달된 props를 통해 params에 액세스해야 했습니다.

import React from "react"
import ReactDOM from "react-dom"
import {
  BrowserRouter as Router,
  Switch,
  Route
} from "react-router-dom"

function Post(props) {
  let { id } = props.match.params
  return <div>Now showing post {id}</div>
}

function App(){
  return(
   <div className='app'>
    <Router>
      <Switch>
        <Route exact path="/" component={Homepage} />
        <Route 
          path="/blog/:id"
          render={routerProps => (
           <Post {...routerProps}/>
          )}
          />
      </Switch>
    </Router>
   </div>
 )
}

이제 매개변수에 액세스할 수 있도록 useParams 후크를 호출하기만 하면 됩니다.

import React from "react"
import ReactDOM from "react-dom"
import {
  BrowserRouter as Router,
  Switch,
  Route,
  useParams
} from "react-router-dom"

function Post(props) {
  let { id } = useParams()
  return <div>Now showing post {id}</div>
}

function App(){
  return(
   <div className='app'>
    <Router>
      <Switch>
        <Route exact path="/" />
          <Homepage />
        </Route>
        <Route path="/blog/:id">
          <Post />
        </Route>
      </Switch>
    </Router>
   </div>
 );
}

사용위치

이제 React-Router 업데이트와 함께 제공되는 또 다른 후크는 useLocation 후크입니다.

이 후크는 현재 URL을 나타내는 location 개체에 대한 액세스를 제공합니다. 공식 문서에 따르면 useLocation 후크는 URL이 업데이트될 때마다 새 useState를 반환하는 location로 볼 수 있습니다.

import React from "react"
import ReactDOM from "react-dom"
import {
  BrowserRouter as Router,
  Switch,
  useLocation
} from "react-router-dom"

const LearnMore = () => {
  let location = useLocation()
  return(
    <div>
      You are currently at the following path {location.pathname}
    </div>
  )
 }

function App(){
 return(
  <div className='app'>
    <Router>
     <ul>
        <li>
            <Link to='/'>Home</Link>
        </li>
        <li>
            <Link to='/learn-more'>Learn More</Link>
        </li>
     </ul>
     <Switch>
       <Route exact path='/'>
          <HomePage />
       </Route>
       <Route path='/learn-more'>
          <LearnMore />
       </Route>
     </Switch>
    </Router>
  </div>
 )
}

useRouteMatch

마지막으로 useRouteMatch 후크를 사용하면 match 구성 요소를 실제로 렌더링하지 않고도 <Route> 속성에 액세스할 수 있습니다.

이전에는 render prop 함수를 사용하여 다음과 같이 처리해야 했습니다.

import { Route } from "react-router-dom"

function AnimalCard() {
  return (
    <Route
      path="/animal/:id"
      render={({ match }) => {
        // Do some stuff with your match...
        return <div />
      }}
    />
  );
}

이제 경로가 일치하면 후크를 가져오고 요소를 렌더링할 수 있습니다.

import { useRouteMatch } from "react-router-dom"

function AnimalCard() {
  let match = useRouteMatch("/animal/:id")

  // Do some stuff with your match...
  return <div />;
}

useRouteMatch 후크에 대해 매우 유용한 한 가지는 strict , exact , path 및 sensitive 옵션도 허용한다는 것입니다.

결론

자, 당신은 그것을 가지고 있습니다! React-Router 후크에 대한 간략한 살펴보기. 다음 프로젝트에서 이것을 시도하고 전체 문서here를 확인하십시오.