리액트 버전 6으로 따라하는데 404에러가 뜹니다

안녕하세요.

createBrowserRouter의 사용법에서 놓치신 부분이 있으신 듯 합니다.

createBrowserRouter와 BrowserRouter의 사용법이 다릅니다.

createBrowserRouter의 인자로 URL별 라우팅을 하기 때문에, RouterProvider 내부에서는 Routes/Route를 통해 라우팅을 하실 필요가 없습니다. 불필요한 중복입니다.

Routes와 Route를 쓰실려면 BrowserRouter를 쓰셔야 합니다.

createBrowserRoute에서 라우팅 처리를 모두 하기 때문에, Root 컴포넌트의 Routes/Route는 모두 제거하시고, Outlet 컴포넌트 지정을 통해 children 컴포넌트가 렌더링될 수 있도록 영역을 지정해주셔야 합니다.

그리고 RouterProvider에서는 router 속성만 지정하시면 되고, children 은 지정하실 필요가 없습니다.

그럼 <RouterProvider router={router} /> 처럼 될 것이구요.

Root 컴포넌트는 아래와 같이 Outlet를 쓰는 형태가 될 것이구요.

function Root() {
return (
<div>
최상위컴포넌트
<Outlet />
</div>
)

}

router에서는 다음과 같이 children을 지정해주셔야 합니다.

아래 질답을 통해 createBrowserRouter와 BrowserRouter의 비교 예시가 있으니, 이 질답도 참고해보세요.

https://www.inflearn.com/questions/720057/createbrowserrouter%EC%97%90-%EB%8C%80%ED%95%9C-%EC%A7%88%EB%AC%B8%EC%9E%85%EB%8B%88%EB%8B%A4

화이팅입니다~!!!

createBrowserRoute 를 사용하면서 강의를 따려가려다보니 index.js 안에서 모든 라우트를 설정해야하는것 같은데 그렇게 사용하는것이 맞는지 여쭙고싶습니다..

답변감사합니다

index.js 를 말씀해주신 자료보고 바꾸니깐 잘되네요

import React from "react";
import ReactDOM from "react-dom/client";
import "./index.css";
import reportWebVitals from "./reportWebVitals";
import Root from "pages";
import { createBrowserRouter, RouterProvider } from "react-router-dom";
import About from "pages/About";
import Home from "pages/Home";

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

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

reportWebVitals();