react-router-dom

Primary Components

routers : <BrowserRouter>

route matchers : <Route> , <Switch>

navigation : <Link>, <Redirect>


import { BrowserRouter, Route, Switch, Link, Redirect } from 'react-router-dom';

Routers

리액트 어플리케이션의 라우팅을 담당합니다.

<BrowserRouter>는 regular URL paths를 사용하여 라우팅합니다.

탑-레벨의 <App> 요소를 라우터 안에 넣어주세요.


// /src/index.jsx

import React from "react";
import ReactDOM from "react-dom";
import { BrowserRouter } from "react-router-dom";

function App() {
  return <h1>Hello React Router</h1>;
}

ReactDOM.render(
  <BrowserRouter>
    <App />
  </BrowserRouter>,
  document.getElementById("root")
);

Route Matchers : `<Switch>` `<Route>`

children <Route> 중에서 path가 현재 URL과 match하는 것을 찾아냅니다. 찾으면 switch문법 처럼 해당 <Route>만 render하고 나머지는 무시합니다.

어떠한 <Route>도 match하지 않으면 (null)을 반환합니다.

Navigation : `<Link>` `<Redirect>`