[React] react-router-dom

참조, 참조1

• react-router - 웹&앱
• react-router-dom - 웹
• react-router-native -앱

import React ,{Component} from 'react';
import { BrowserRouter,Route, Link,Switch } from "react-router-dom";

• BrowserRouter

  • history API를 사용해 URL과 UI를 동기화하는 라우터입니다.

  DOM의 Window 객체는 history 객체를 통해 브라우저의 세션 기록에 접근할 수 있는 방법을 제공합니다. history는 사용자를 자신의 방문 기록 앞과 뒤로 보내고 기록 스택의 콘텐츠도 조작할 수 있는, 유용한 메서드와 속성을 가집니다. MDN

• Route

  • 컴포넌트의 속성에 설정된 URL과 현재 경로가 일치하면 해당하는 컴포넌트, 함수를 렌더링한다.

• Link

  • a태그와 비슷합니다.

  • to속성에 설정된 링크로 이동합니다.

    • 기록이 history스택에 저장됩니다.

• Switch

  • 자식 컴포넌트 Route또는 Redirect 중 매치되는 첫 번째 요소를 렌더링합니다.

  • Switch를 사용하면 BrowserRouter만 사용할 때와 다르게 하나의 매칭되는 요소만 렌더링한다는 점을 보장해줍니다.

    • 사용하지 않을 경우 매칭되는 모두를 렌더링합니다.

1. react-router-dom 라이브러리 설치

npm i react-router-dom

2. 적용

index.js

...
import { BrowserRouter } from 'react-router-dom'

ReactDOM.render(
	<BrowserRouter>
    	<App />
	</BrowserRouter>
)

• BrowserRouter 컴포넌트는 react-router-dom 내장 컴포넌트로 HTML5의 History API를 사용하여 페이지 새로고침 없이 주소변경, props 내려주기를 할 수 있도록 한다.

App.js

import React from "react";
import { Route } from "react-router-dom";
import { Home, About, Todos } from "./pages/Wrap";

function App() {
  return (
    <div className="App">
      <Route exact path="/" component={Home} />
      <Route path="/about" component={About} />
    </div>
  );
}

export default App;

• App.js에서 Home, About 페이지의 Route를 설정한다.

• Home라우트에 exact를 붙이지 않으면 /가 붙은 모든 컴포넌트가 랜더링된다.

  • 즉, 정확히 path에 해당하는 경로의 컴포넌트로 이동하기 위해서이다.

Link태그로 해당 라우터 경로로 이동

import React from "react";
import { Route } from "react-router-dom";
import { Home, About, Todos } from "./pages/Wrap";

function App() {
  return (
    <div className="App">
      <ul>
        <li>
          <Link to="/">홈</Link>
        </li>
        <li>
          <Link to="/about">소개</Link>
        </li>
      <ul>
    
    
      <Route exact path="/" component={Home} />
      <Route path="/about" component={About} />
    </div>
  );
}

export default App;