0630 React router dom

routh path = "*"

회사 코드를 보다가

 <Route path="*" element={<Dashboard />} />

이런 코드를 보았다.

 <Route path="/*" element={<Dashboard />} />

이런 경우는 봤는데 그냥 "*"는 뭘까?
2번째 줄은 정확한 path를 나타낼 때 사용한다.

Setting the path to * will act as a catch-all for any undefined URLs. This is great for a 404 error page.

그냥 별표로 경로를 설정하면 정의되지 않은 url에 대한 모든 정보가 수집이 된다.
404 오류페이지에 적합하다.

특수기호라서 구글링을 하기도 힘들었다 ㅎㅎ

import React from "react";
import { Navigate, Outlet } from "react-router-dom";

function PrivateRoute() {
  const auth = window.sessionStorage.getItem("access");

  return auth ? <Outlet /> : <Navigate to="/" />;
}

export default PrivateRoute;

Navigate

나는 그동안 프로젝트에서 useNavigate를 사용해왔었다. 회사코드는 Navigate를 사용하고 있었다.
useNavigate와 Navigate의 차이는 뭘까?

useNavigate

useNavigate는 특정 event가 발생할 때 url을 조작할 수 있는 인터페이스를 제공한다.
navigate("../success", { replace: true});
첫 번째 인자로 주소를 받고 두번째 인자로 {replace,state} 인수를 사용한다.

• replace(true or false)
  true를 쓰면 navigate에 적힌 주소로 넘어가고 뒤로가기를 눌러도 방금의 페이지로 돌아오지 않는다.

Navigate

<Navigate> 요소는 렌더링될 때 현재 위치를 변경한다.

import { Navigate } from 'react-router-dom';

function Func() {

    const onClickImg = () => {
    return <Navigate to="/login" />;
  }

  return (
  	<img src={...} alt={...} onClick={onClickImg} />
  );
}

export default Func;

useNavigate를 둘러싼 component wrapper이며 props와 동일한 모든 인수를 허용한다.
이 태그 역시 replace,state를 모두 사용할 수 있다.

Outlet

부모 경로 요소에서 자식 경로 요소를 렌더링하려면 <Outlet>을 사용해야 한다. 이렇게 하면 하위 경로가 렌더링될 때 중첩된 UI를 표시할 수 있다. 부모 경로가 정확히 일치하면 하위 인덱스 경로를 렌더링하거나 인덱스 경로가 없으면 아무것도 렌더링하지 않는다.

function Dashboard() {
  return (
    <div>
      <h1>Dashboard</h1>

      {/* This element will render either <DashboardMessages> when the URL is
          "/messages", <DashboardTasks> at "/tasks", or null if it is "/"
      */}
      <Outlet />
    </div>
  );
}

function App() {
  return (
    <Routes>
      <Route path="/" element={<Dashboard />}>
        <Route
          path="messages"
          element={<DashboardMessages />}
        />
        <Route path="tasks" element={<DashboardTasks />} />
      </Route>
    </Routes>
  );
}

참고

routh path *
useNavigate와 Navigate
React Router 공식 문서