close

URL 형식 및 Routing 반응- 사용 가이드 React Router

React 애플리케이션에서 URL 형식은 routing 페이지를 탐색하고 해당 콘텐츠를 표시하는 데 중요한 역할을 합니다. React에서 관리하기 위해 라이브러리를 routing 사용할 수 있습니다. 다음은 React 애플리케이션에서 URL 형식을 지정하고 처리하는 방법에 대한 기본 가이드입니다. React Router React Router routing

 

설치하다 React Router

터미널에서 프로젝트 디렉토리를 열고 다음 명령을 실행하여 설치합니다. React Router npm install react-router-dom

필요한 구성 요소를 에서 React 구성 요소로 가져옵니다. React Router

 

경로 정의

구성 요소를 사용하여 React 애플리케이션을 래핑하고 기본 URL 형식을 설정합니다. <BrowserRouter>

구성 요소를 사용하여 <Route> 애플리케이션에서 경로를 정의합니다.

예:

import { BrowserRouter, Route } from 'react-router-dom';  
  
function App() {  
  return( 
    <BrowserRouter>  
      <Route exact path="/" component={Home} />  
      <Route path="/about" component={About} />  
      <Route path="/products" component={Products} />  
    </BrowserRouter>  
 );  
}

 

정의 Link _

구성 요소를 사용하여 응용 프로그램에서 탐색을 만듭니다. <Link> link

예:

import { Link } from 'react-router-dom';  
  
function Navigation() {  
  return( 
    <nav>  
      <ul>  
        <li>  
          <Link to="/">Home</Link>  
        </li>  
        <li>  
          <Link to="/about">About</Link>  
        </li>  
        <li>  
          <Link to="/products">Products</Link>  
        </li>  
      </ul>  
    </nav>  
 );  
}

 

액세스 경로 매개변수

경로 매개변수 에 액세스하려면 형식의 속성이 <Route> 있는 구성요소를 사용하십시오. path /users/:id

에서 정의한 구성요소 내에서 를 사용하여 경로 매개변수 값에 액세스 <Route> 할 수 있습니다. useParams()

예:

import { useParams } from 'react-router-dom';  
  
function User() {  
  const { id } = useParams();  
  
  return <div>User ID: {id}</div>;  
}

 

사용 Switch 및 Redirect

구성 요소를 사용하여 경로와 일치하는 첫 번째 경로만 렌더링합니다. <Switch>

하나의 지정된 경로에서 다른 경로로 사용자 에게 구성 요소를 사용합니다. <Redirect> redirect

예:

import { Switch, Route, Redirect } from 'react-router-dom';  
  
function App() {  
  return( 
    <BrowserRouter>  
      <Switch>  
        <Route exact path="/" component={Home} />  
        <Route path="/about" component={About} />  
        <Route path="/products" component={Products} />  
        <Redirect to="/" />  
      </Switch>  
    </BrowserRouter>  
 );  
}

 

이것들은 URL 포매팅과 routing React에서 사용하는 몇 가지 기본 개념입니다. 를 활용하면 URL을 기반으로 다양한 콘텐츠를 탐색하고 표시할 수 있는 유연한 React 애플리케이션을 만들 수 있습니다. React Router React Router