React router dom 시작하기

📍 설치하기

https://reactrouter.com/docs/en/v6/getting-started/overview

$ npm i react-router-dom@5.3.0
$ yarn add react-router-dom

import { BrowserRouter, Route, Link, Routes} from "react-router-dom";

<Router> 
      <Routes>
        <Route path="/" >
	        <Home />
				<Route/>
        <Route path="/about">
	        <About />
				<Route/>
      </Routes>
</Router>

path 안에 url이 있다면, Home컴포넌트를 보여준다.

Switch 말고 Routes를 쓰도록 하자

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

function App() {
  return (
    <BrowserRouter>
      <div>
        <Link to="/">Home</Link>
        <br />
        <Link to="/movie">Movie</Link>
        <br />
        <Link to="/about">About</Link>
        <br />
      </div>
      <Routes>
        <Route exact path="/" element={Home} />
        <Route path="/movie" element={Movie} />
        <Route path="/about" element={About} />
      </Routes>
    </BrowserRouter>
  );
}

• React-Router-dom은 컴포넌트의 모음집이다.
• 우리가 유저에게 보여주고싶은 것들이 안에 들어간다.
• path="/movie", path=”/about” 의 url경로를 통해 해당 컴포넌트 Home, About 을 보여준다.
• Switch 컴포넌트는 한번에 하나의 Route를 렌더링하기 위해서이다.
• 하지만 이제는 Switch대신 Routes를 사용한다.
• Route 컴포넌트는 만약 속성에 설정된 URL과 현재 경로가 일치할 때, 해당 컴포넌트, 함수를 렌더링한다.
• Routes 컴포넌트는 자식 Route 요소들을 살핀 후 최적의 조합을 찾고, UI 가지를 렌더링한다.
• BrowserRouter 컴포넌트는 history API를 사용해 URL과 UI를 동기화하는 라우터입니다.
• BrowserRouter로 감싸면 작동이 안되는 경우가 있다…
• Router는 최상위 컴포넌트에만 적용해주면 된다 → 사용할 위치가 정해져 있는 것은 아님…

한 Route 에서 다른 Route로 이동하는 방법은??

<h1>
   <Link to="/movie">{title}</Link>
</h1>

이렇게 Link컴포넌트를 import 한 뒤에, url을 추가하면 된다