리액트 버전 6으로 따라하는데 404에러가 뜹니다
1649
14 asked
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";
const router = createBrowserRouter([
{
path: "/",
element: <Root />,
},
]);
const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
<React.StrictMode>
<RouterProvider router={router}>
<Root />
</RouterProvider>
</React.StrictMode>
);
reportWebVitals();
index .js 는 이렇게 설정하였고
import React from "react";
import { Routes, Route } from "react-router-dom";
import AppLayout from "components/AppLayout";
import About from "./About";
import Home from "./Home";
function Root() {
return (
<AppLayout>
최상위컴포넌트
<Routes>
<Route path ="/" element={<Home/>} />
<Route path ="/about" element={<About/>} />
</Routes>
</AppLayout>
);
}
export default Root;
page/index.js
는 이렇게 설정하였는데
패스부분 "/"는 잘뜨는데
/about은 404 에러가 뜹니다..
Answer 3
2
안녕하세요.
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의 비교 예시가 있으니, 이 질답도 참고해보세요.
화이팅입니다~!!!
0
createBrowserRoute 를 사용하면서 강의를 따려가려다보니 index.js 안에서 모든 라우트를 설정해야하는것 같은데 그렇게 사용하는것이 맞는지 여쭙고싶습니다..
0
확인해보니, createBrowserRouter은 중첩해서 써보니, 아래의 오류가 발생하는 군요.
You cannot render a <Router> inside another <Router>. You should never have more than one in your app.
createBrowserRouter 자체가 router라서 중첩이 안 되는 군요.
BrowerRouter의 경우, BrowserRoute는 한 번만 정의하고
내부에서 Routes/Route만 사용하기에 강의 흐름대로 작성할 수 있습니다.
강의 진행 시에는 강의에서 진행하는 버전에 맞춰 진행하시고, 강의가 마무리된 후에 원하시는 버전으로 업그레이드해보시길 추천드립니다.
0
답변감사합니다
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();
안녕하세요.
0
48
1
[OneToOne Field Demo] get_user_model() 메서드를 활용해야 하는 이유?
0
273
1
useEffect 훅에서 else 유무에 따른 결과
0
211
1
useAxios 훅의 dependency array 설정
0
245
1
useEffect에서 변수 업데이트 관련 질문
0
381
1
rest_framework.generics.CreateAPIView의 model 속성 유무
0
266
1
bootstrap4
0
470
4
리뉴얼 강의가 오픈이 되면 기존 강의는 더이상 못보는걸까요
1
362
1
admin form에서 앞선 필드 선택 후 다른 필드 select widget 구성하는 방법
0
572
3
useState는 필수일까요?
0
261
1
python manage.py makemigrations instagram 시 created_at default 오류가 발생합니다.
0
597
4
Django allauth를 사용한 소셜 로그인 시 에러
0
654
1
프로젝트명 변경 뒤, 디버그툴바+디버그모드 사용 시 에러
0
552
2
useLocalStorage() 함수 사용여부
0
228
1
django에 LOGIN_URL = '/accounts/login/'의 의미?
0
447
1
리듀서의 의미 재확인
0
430
1
simple-jwt Refresh Token 사용 노하우
0
897
2
docker compose 를 통한 배포 관련 오류 문의
0
670
1
파이썬 속도 장고 관련 궁금한게 있습니다.
0
364
1
is_like_user
0
233
1
related_name 오류
0
272
1
re_path 오류
0
258
1
re_path url
0
249
1
No post matches the given query
0
659
2