[React] react-router-dom 6.4

Router.tsx

import {createBrowserRouter, Route, Routes} from "react-router-dom";
import Header from "./components/Header";
import Home from "./screens/Home";
import About from "./screens/About";
import Root from "./Root"

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

export default router;

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';

function Root() {
  return (
    <div>
      hello
    </div>
  );
}

export default Root;

 

---

이렇게 해도 about화면이 안뜰거다.

계속 hello만 뜰거다.

about이 뜨게 하려면

 

 

Root.tsx

import React from 'react';
import { Outlet } from 'react-router-dom';

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

export default Root;

이렇게 Outlet을 넣어야한다.

 

Outlet은 Root화면의 자식들을 render 한다  (위의 코드모양과 함께 기억해두기!)

 

---

에러창

errorElement: 컴포넌트에 에러가 발생해서 충돌하거나 컴포넌트의 위치를 찾지 못할때 쓰는거

이렇게하면 path를 잘못쳤을때 NotFound창이 뜬다.

 

Router.tsx

import {createBrowserRouter, Route, Routes} from "react-router-dom";
import Header from "./components/Header";
import Home from "./screens/Home";
import About from "./screens/About";
import Root from "./Root"
import NotFound from "./screens/NotFound";

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

export default router;

 

NotFound.tsx

function NotFound(){
    return <h1>404 NotFound</h1>
}
export default NotFound;

---

Router.tsx

import {createBrowserRouter, Route, Routes} from "react-router-dom";
import Header from "./components/Header";
import Home from "./screens/Home";
import About from "./screens/About";
import Root from "./Root"
import NotFound from "./screens/NotFound";
import User from "./screens/users/User";
import Followers from "./screens/users/Followers";

const router = createBrowserRouter([
    {
        path:"/",
        element: <Root />,
        children: [
            {
                path: "",
                element: <Home />,
            },
            {
                path:"about",
                element: <About />
            },
            {
                path:"users/:userId",
                element: <User />,
                children: [
                    {
                        path:"followers",
                        element: <Followers />
                    }
                ]
            }
        ],
        errorElement: <NotFound />
    }
])

export default router;

User.tsx

import { Outlet, useParams, Link } from "react-router-dom";
import { users } from "../../db";

function User(){
    const {userId} = useParams();
    
    return (
    <>
    <h1>User with id {userId} is named: {users[Number(userId) -1].name}</h1>
    <hr/>
    <Link to="followers">See followers</Link>
    <Outlet />
    </>
    )
}
export default User;

# user에 자식이 있으면 Outlet을 사용하는거다.
outlet이 이 스크린의 자식을 render하게 된다.

# /followers하면 localhost:3000/followers로 가고
followers라고 하면 현재 내가 있는 그 URL 다음에 경로를 추가시킬거다.
그래서 localhost:3000/users/1/followers 이렇게 갈거다.

---

followers에게 context를 보낼거다

 <Link to="followers">See followers</Link>
    <Outlet context={{
        nameOfMyUser: users[Number(userId) -1].name,
    }}/>

 

followers에서는 useOutletContext를 이용해서 context를 받는다!

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

function Followers(){
    const ctx = useOutletContext();
    console.log(ctx)
    return <h1>Followers</h1>
}
export default Followers;

이렇게 하면

{nameOfMyUser: 'lynn'}

이렇게 출력이 된다.