프로젝트를 시작할때 세팅을 마치고 가장 먼저 페이지를 짠다. 이 때 페이지 라우팅이 필요하다. 리액트 라우터가 여러가지 있는데 이들에 대해 한번 정리해보고자 한다.

라우팅

리액트는 SinglePageApplication이다. 페이지 전환 요청시 페이지 전체를 새로 불러오지 않고 처음 페이지에서 필요한 화면으로 전환해주는 셈이다. 이때 요청하는 url에 따라 맞는 페이지를 보여주는 것이 라우팅이다.

React Router

Home v6.14.1

2021년에 했던 프로젝트에선 이런식으로 사용했다. 하지만 이것도 구버전이 되었다. 이것도 Redirect path=”” .. 에서 업데이트 된 것이었는데.. 역시 빠른 프론트세상

<Switch>
	<Route path="" ... />
</Switch>

현재 기준 v6.4이고 다음과 같은 라우터들이 있다.

• createBrowserRouter
• createMemoryRouter : 브라우저 주소와 무관하다. 주로 앱에 쓰인다.
• createHashRouter : 주소에 hast(#)가 있고 정적인 페이지에 적합하다.
• createStaticRouter: 서버사이드 렌더링에 사용한다.

위의 라우터들은 data APIs (useNavigation 등)을 지원한다.

반대로, 아래의 라우터들은 data APIs를 지원하지 않는다.

• < BrowserRouter>
• < MemoryRouter>
• < HashRouter>
• < NativeRouter>
• < StaticRouter>

이 중 createBrowserRouter와 BrowserRouter를 정리해보자!

createBrowserRouter

공식문서에서도 웹프로젝트에 createBrowserRouter를 사용하기를 권장한다.

npm install react-router-dom

import { createBrowserRouter, RouterProvider} from "react-router-dom";

1. RouterProvider로 컴포넌트 전체를 감싼다.
2. createBrowserRouter로 라우터를 만든다.

//App.js
import React from 'react';
import { createBrowserRouter, RouterProvider } from 'react-router-dom';
import Home from './pages/Home';
import Concept from './pages/Concept';
import Site from './pages/Site';
import Analysis from './pages/Analysis';
import NotFound from './pages/NotFound';

const router = createBrowserRouter([  // 2.
  {
    path: '/',
    element: <Home />,
    errorElement: <NotFound/>,
    children: [
      {path: '/site', element: <Site/>},
      {path: '/analysis', element: <Analysis/>},
    ],
  },
  {
    path: '/concept',
    element: <Concept />,
    errorElement: <NotFound/>,
  }
])
function App() {
  return (
    <RouterProvider router={router} />  // 1.
  );
}

export default App;

children에 주어진 경로와 컴포넌트는 해당 기본 element내에서 Outlet 이 있다면 설정한 경로에 따라 불러와진다. 화면에서의 위치도 딱 저 < Outlet /> 이 위치한 곳이다. 예를 들면,

// Home.tsx
import React from "react";
import { Outlet } from "react-router-dom";

const Home = () => {
    return (
        <div>
            Home
            <Outlet />
        </div>
    )
}
export default Home;

실행해보자!

기본 주소에 /site 이란 경로를 추가하면 Home 아래에 Site컴포넌트의 내용인 Site가 함께 출력되었다!

위처럼 Home아래에가 아닌, 컴포넌트를 화면 전체로 이용할것이라면 ??
→ createBrowserRouter( [ ] ) 여기 배열에 { } 객체 나열로 경로를 지정하면 된다.

children: [
    {path: '/site', element: <Site/>},
    {path: '/analysis', element: <Analysis/>},
  ],

/concept 경로를 입력하면

useNavigation은 다음과 같이 이용할 수 있다.

import { useNavigate } from "react-router-dom";

function Header() {
  const navigate = useNavigate();
  const onAboutClick = () => {
    navigate("/about");
  };
  return (
    <header>
      <ul>
        <li>
          <Link to={"/"}>Home</Link>
        </li>
        <li>
          <button onClick={onAboutClick}>About</button>
        </li>
      </ul>
    </header>
  );
}

< BrouserRouter >

useNavigation같은 리액트라우터의 dataAPI 사용은 안되지만 다음과 같이 라우팅 할 수 있다.

//App.js
import React from 'react';
import './App.css';
import { BrowserRouter , Routes, Route} from 'react-router-dom';
import Home from './pages/Home';
import Concept from './pages/Concept';
import Site from './pages/Site';
...

function App() {
  return (
    <BrowserRouter>
			<Routes>
        <Route path="/" element={<Home />} />
        <Route path="/concept" element={<Concept />} />
        <Route path="/site" element={<Site name={name}/>} />
		</BrowserRouter>
  );
}

export default App;

페이지 이동에 대하여 Link 와 useNavigate

페이지 이동에 두가지 방법이 있다.

• Link
  DOM에선 < a >태그처럼 변환되고 사용도 a태그와 비슷하다
  

    import { Link } from "react-router-dom";
    ..
    <Link to={이동할경로}> 누르면 바로 이동 </Link>

<Route path = “” > 여기서 설정한 path 경로를 입력해야한다.

• useNavigate
  리액트 훅이다.
  조건분기가 있고 조건에 따라 navigate를 호출하는 상황에 사용한다.
  -1 등을 입력해서 이전 페이지로 갈 수 있다.
  최상단에서 호출해야한다. 그래서 주로 다음과 같이 사용한다.
  

    const Test1 = () => {
    	const navigate = useNavigate();
    	...
    	return(
    		<>
    			<button onClick={() => {navigate("/login");}}>로그인</button>
    			<button onClick={ () => navigate(-1)}> 전으로 </button>
    		</>
    	)
    }

주소에서 파라미터 가져오기

import { useParams } from "react-route-dom";

const PostPage = () => {
  const { postId } = useParams();

Routes 목록 여기서 설정한 path 경로를 입력해야한다.