✍4.1 BrowserRouter

react-router-dom 6.4 버전 설치

npm i react-router-dom@6.4

BrowserRouter 구현하는 방식이 조금 바뀌었는데, createBrowserRouter에서 다뤄본다(4.2)

function Router() {
  return (
    <BrowserRouter>
      <Header />
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
      </Routes>
    </BrowserRouter>
  );
}

✍4.2 createBrowserRouter

createBrowserRouter : JSX 컴포넌트를 사용하지 않고 브라우저를 좀 더 선언적으로 바꿔주고, Router를 array 형식으로 표현할 수 있게 해준다.
*App.tsx는 더 이상 Router를 render 해주지 않는다.

✔️About 페이지를 render 하는 순서를 간략하게 적어보자.
1. Router.tsx 페이지에서 react router가 <Root/>를 보고 Root를 render
2. /about으로 가려고 하는 상황이기 때문에 react router는 Outlet을 About으로 대체한다.

결과적으로, About 화면을 띄우려면 먼저 루트인 <Root/>화면을 띄우게 되고 그 다음으로 자식인 <About/> 화면을 띄우게 되는 것이다.

//Root.tsx

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

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

✍4.3 errorElement

❕errorElement? 컴포넌트에 에러가 발생해서 충돌하거나 컴포넌트의 위치를 찾지 못할 때 쓴다.

Root element path에 에러를 추가할 수 있기 때문에 오류 화면도 구현이 가능
http://localhost:3000/aaaa 이런식으로 /뒤에 아무거나 입력하면 <NotFound>화면을 띄우게 된다.

//Router.tsx

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

Home.tsx에서 일부러 컴포넌트 충돌이 나도록 해보자.

function Home() {
  const users: any = [];
  return <h1>{users[0].name}</h1>;
}

//Router.tsx에서 errorElement만 추가하기

path: "",
element: <Home />,
errorElement: <ErrorComponent />,

✍4.4 useNavigate

useNavigate에서는 유저를 이동시키고 위치를 바꿔준다.

유저가 로그인해서 redirect 시키고 싶거나, 유저가 어떤 페이지로 갔는데 접근 권한이 없거나 했을 때 useNavigate를 쓰면 된다.

 const navigate = useNavigate();
  const onAboutClick = () => {
    navigate("/about");
  };

<button onClick={onAboutClick}>About</button>

✍4.5 useParams

URL으로부터 정보를 얻어올 수 있다.

//User.tsx

function User() {
  const { userId } = useParams();
  //console.log(userId);
  return (
    <h1>
      User with it {userId} is named: {users[Number(userId) - 1].name}
    </h1>
  );
}

✍4.6 Outlet

모든 Outlet 컴포넌트는 Route의 자식들을 render

Link to="/followers" 는 localhost:3000/followers인 절대경로로 이동하는데,
Link to="followers"로 "/"를 쓰지않으면 상대경로를 뜻하고, 지금 내가 현재 있는 경로 다음에 바로 추가 된다. http://localhost:3000/users/1/followers

✍4.7 useOutletContext

useParams을 써서 URL을 참조하는 방법도 있지만,

const { userId } = useParams();
  console.log(userId);

자식 route들과 소통해보는 방법도 존재한다.

//Users.tsx

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

//Followers.tsx

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

interface IFollowersContext {
  nameOfMyUser: string;
}

function Followers() {
  //const csx = useOutletContext();
  //console.log(csx);
  const { nameOfMyUser } = useOutletContext<IFollowersContext>();
  return <h1>Here are {nameOfMyUser}의 followers</h1>;
}
export default Followers;

✍4.8 Extras

useSearchParams? search 파라미터를 수정하게 도와주고, URL에서 search 파라미터 읽는 것을 도와준다.

useSearchParams은 array를 제공하는데, array의 첫번째 아이템은 search 파라미터를 읽기위한 것이고, 두번째 아이템은 search 파라미터를 set 하기 위한 함수이다.

http://localhost:3000/?geo=123 일 때
console.log(readSearchParams.has("geo")); true
console.log(readSearchParams.get("geo")); 123