라우터 설치

npm install react-router-dom

BrowserRouter

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





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

BrowserRouter 는 리액트 라우터 돔을 적용하고 싶은 컴포넌트에 최상위 컴포넌트를 감싸주는 웨퍼컴포넌트

이렇게 하면 App이라는 컴포넌트에서는 BrowserRouter컴포넌트를 사용할수 있는 상태라는것

Route 예제

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import reportWebVitals from './reportWebVitals';
import {BrowserRouter, Route, Routes} from 'react-router-dom';

function Home() {
  return (
    <div>
      <h2>Home</h2>
      Home...
    </div>
  )
}

function Topics() {
  return (
    <div>
      <h2>Topics</h2>
      Topics...
    </div>
  )
}

function Contact() {
  return (
    <div>
      <h2>Contact</h2>
      Contact...
    </div>
  )
}


function App() {
  return (
    <div>
      <h1>React Router DOM example</h1>
      <ul>
        <li><a href="/">Home</a></li>
        <li><a href="/topics">Topics</a></li>
        <li><a href="/contact">Contact</a></li>
      </ul>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/topics" element={<Topics />} />
        <Route path="/contact" element={<Contact />} />
      </Routes>
    </div>
  );
}



ReactDOM.render(
  <BrowserRouter>
  <React.StrictMode>
    <App />
  </React.StrictMode>
  </BrowserRouter>,
  document.getElementById('root')
);

라우터가 버전 업그레이드 되면서 오래된 강의자료들이랑 다르게 작성되고있다. 위의 코드로 잘 숙지하자.

exact라는 기능이 없어졌다.(필요없어서) exact없이 위의 코드로 작성해도 exact 기능을 쓴것같은 효과가 나타난다.

Not Found

function NotFound() {
  return (
    <div>
      <h2>NotFound</h2>
      NotFound...
    </div>
  )
}



function App() {
  return (
    <div>
      <h1>React Router DOM example</h1>
      <ul>
        <li><a href="/">Home</a></li>
        <li><a href="/topics">Topics</a></li>
        <li><a href="/contact">Contact</a></li>
      </ul>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/topics" element={<Topics />} />
        <Route path="/contact" element={<Contact />} />
        <Route path="*" element={<NotFound />} />
      </Routes>
    </div>
  );
}

not found 구현방법

Link

        <li><Link to="/">Home</Link></li>
        <li><Link to="/topics">Topics</Link></li>
        <li><Link to="/contact">Contact</Link></li>

a태그 대신 Link와 to를 이용해야한다.

추가학습

• HashRouter

• NavLink

Link를 NavLink로 바꾸면 클릭한곳에 active클래스가 생긴다.

이 클래스에 css를 적용하면 사용자가 어디를클릭했는지 색깔로 표시하는 등 여러 기능을 수행할수 있다.