React Router V6

BrowserRouter vs. createBrowserRouter

BrowserRouter (v5)

//Router.tsx
import { BrowserRouter, Route, Routes } from 'react-router-dom';
function Router() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path='/' element={<Home />} />
        <Route path='/about' element={<About />} />
      </Routes>
    </BrowserRouter>
  );
}

export default Router;

createBrowserRouter (v6.4) - 권장

// index.tsx
import React from 'react';
import ReactDOM from 'react-dom/client';
import { RouterProvider } from 'react-router-dom';
import router from './Router';

const root = ReactDOM.createRoot(
  document.getElementById('root') as HTMLElement
);
root.render(
  <React.StrictMode>
    <RouterProvider router={router} />
  </React.StrictMode>
);

// Root.tsx
import React from 'react';
import { Outlet } from 'react-router-dom';

function Root() {
  return (
    <> 
      <Header />
      <Outlet />
    </>
  );
}

export default Root;

// router.tsx
import React from 'react';
import { createBrowserRouter } from 'react-router-dom';
import Root from './Root';
import About from './screens/About';
import Home from './screens/Home';

const router = createBrowserRouter([
  {
    path: '/',
    element: <Root />,
    children: [
      {
        path: '',
        element: <Home />,
      },
      {
        path: 'about',
        element: <About />,
      },
    ],
  },
]);

export default router;

ErrorElement

// router.tsx
import React from 'react';
import { createBrowserRouter } from 'react-router-dom';
import Root from './Root';
import About from './screens/About';
import Home from './screens/Home';

const router = createBrowserRouter([
  {
    path: '/',
    element: <Root />,
    children: [
      {
        path: '',
        element: <Home />,
        errorElement: <ErrorHome />, //페이지 내부
      },
      {
        path: 'about',
        element: <About />,
      },
    ],
    errorElement: <ErrorPage />, //페이지 전체 
  },
]);

export default router;

useNavigate

유저 이동시, vs. Link

useParams

...
      {
        path: 'users/:id',  //path와 children으로 나눠서 작성하지 않기
        element: <User />,
      },
...

Outlet

부모 페이지(ex./users/1)에서 자식 페이지(ex./users/1/follower) 라우팅

// Users.tsx
return (
  ...
  <Link to='follower' />
  <Outlet />
  ...
);

// router.tsx
...
	  {
        path: 'users/:id',
        element: <User />,
        children: [
        	{
              path: 'follower',
              element: <Followers />,
            }
        ],
      },
 ...

useOutletContext

자식에게 데이터 넘기기
예제 1.

// Users.tsx에서 넘겨주기
return (
  ...
  <Link to='followers' />
  <Outlet 
  	context={{
    	nameOfMyUser: users[Number(id)-1].name,
     }}
  />
  ...
);

// Followers.tsx에서 사용하기
    const { nameOfMyUser } = useOutletContext<nameOfMyUser : string>();

예제 2. 다크모드

useSearchParams

MDN/URLSearchParams

const [searchParams, setSearchParams] = useSearchParams();

useMatch

현재 위치를 기준으로 지정된 경로의 경로에 대한 일치 데이터를 반환

etc

useLoaderData, Form