Router

SPA를 만들 때, 여러가지 페이지가 필요할 수 있다. 서로 다른 페이지는 주소도 달라야 한다.
이렇게 다른 주소에 따라 다른 뷰를 보여주는 과정을 '경로에 따라 변경한다' 라는 의미로 라우팅(Routing) 이라고 한다.

리액트에는 이러한 자체 기능이 내장되어 있지 않다. 따라서 리액트에서는 라우팅을 위해 React Router 라는 라이브러리를 가장 많이 사용한다.

설치

npm install react-router-dom

React Router 주요 컴포넌트

< Browser Router >

라우터 역할을 한다. 최상위 컴포넌트를 감싸야 한다.

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

< Routes > , < Route >

경로를 매칭해주는 역할을 한다. Routes 컴포넌트 자식 요소로 Route가 들어가야 한다.
Route 컴포넌트에 path 속성과 element 속성을 이용하여 어떤 컴포넌트를 보여줄지 지정한다.

        <div className="App">
            <Sidebar />
            <section className="features">
              <Routes>
                <Route path="/" element={<Tweets />} />
                <Route path="/about" element={<About />} />
                <Route path="/mypage" element={<MyPage />} />
              </Routes>
            </section>
        </div>

< Link >

경로를 변경하는 역할을 한다. to 속성을 이용하여 어떤 페이지로 이동할지 지정한다.

<li>
   <Link to="/">Home</Link>{/* Link 컴포넌트를 이용하여 경로를 연결합니다 */}
</li>
<li>
   <Link to="/mypage">MyPage</Link>
</li>
<li>
    <Link to="/dashboard">Dashboard</Link>
</li>

useNavigate

const navigate = useNavigate();

  const onClick = () => {
    navigate(`/mypage/등등 내가 원하는 주소`);
  };

  const onClick = () => {
    navigate(-1);
  };

useNavigate을 이용하여 다른 페이지 이동, 뒤로가기, 앞으로 가기 등을 구현할 수 있다.

navigate("/mypage/등등 내가 원하는 주소",  { replace: true });

두 번째 인자로 { replace: true or false } 인자를 할당할 수 있다.
true를 사용한다면, 첫 번째 인자에 적힌 주소로 넘어간 후 뒤로가기를 하더라도 이전의 페이지로 돌아올 수 없다.
false 는 기본값이며, 이전의 페이지로 뒤로가기가 가능하다.