[TIL/React] BrowserRouter, Navigation, Routes, Route

BrowserRouter

URL 관리하고 라우트를 설정한다. 해당 경로에 맞는 컴포넌트를 렌더링한다.

경로 변경 시, 전체 페이지를 새로 고침 하지 않아도 다른 컴포넌트를 렌더링 할 수 있다.

---

Navigation

사용자에게 네비게이션 메뉴를 제공한다. 헤더나 사이드바에 위치한다.

링크, 버튼 등을 포함한다.

---

Routes

여러 개의 `Route` 컴포넌트를 그룹화하여 라우팅 설정을 정의한다.

---

Route

`path`와 그 경로에 대응하는 컴포넌트 (element)를 설정한다.

사용자가 특정 경로로 이동할 때 해당 컴포넌트를 렌더링한다.

// App.js
import React from 'react';
import { Route } from 'react-router-dom';

import HomePage from './pages/homepages/homepage.component';
import './App.css';

const HatsPage = () => (
  <div>
    <h1>HATS PAGE</h1>
  </div>
)	

function App() {
	/*
		구현한 컴포넌트를 <div>에 담는 대신
        <Route> 컴포넌트를 <div>에 담고
        rendering이 필요한 컴포넌트를
        <Route> 컴포넌트의 프로퍼티로 전달하고 있음
	*/
  return (
    <div>
    	// path="/" 로 인해 localhost:3000/ 주소는 HomePage 컴포넌트가 렌더링 됨
      <Route exact path="/" component={HomePage}/>
      // path="/hats"로 인해 localhost:3000/hats 주소는 HatsPage 컴포넌트가 렌더링 됨
      <Route path="/hats" component={HatsPage}/>
    </div>
  );
}

export default App;

component: `Route`가 렌더링 해야 하는 대상이 되는 컴포넌트
path: 렌더링 할 대상이 되는 컴포넌트의 주소.

---

exact

`path` 속성에 넣은 경로값이 정확히 URL의 경로값과 일치할 때만 렌더링한다.

값으로 true, false를 줄 수 있다.

 

function App() {
  return (
  	// exact를 빼버림
    <div>
      <Route path="/" component={HomePage}/>
      <Route path="/hats" component={HatsPage}/>
    </div>
  );
}

 

위 코드에서 `exact`를 뺄 경우, `localhost:3000/hats`로 접속할 시 `HomePage` 컴포넌트와 `HatsPage` 컴포넌트가 모두 렌더링 된다. 왜냐하면 localhost:3000/hats 라는 주소 내에 HomePage 컴포넌트가 렌더링 되어야 하는 주소인 localhost:3000/ 주소가 포함되어 있기 때문이다. 

 

function App() {
  return (
  	// exact 포함
    <div>
      <Route exact path="/" component={HomePage}/>
      <Route path="/hats" component={HatsPage}/>
    </div>
  );
}

`exact`를 포함할 경우, 주소가 정확히 localhost:3000/ 일 때에만 HomePage 컴포넌트가 렌더링 된다.

---

참고

1. exact란? - https://soldonii.tistory.com/114