react-route-dom 사용 시 not found 해결방법

Question

react 학습 후 처음으로 회사 내 토이 프로젝트를 배포하였습니다.apache에 리액트를 돌려야해서 관련 방법을 검색하고 적용하여 테스트 해보았는데처음 접속 시 not found가 뜨길래 페이지 전체가 문제 인지 알았으나import router from "./routers/routes"; import { RouterProvider } from "react-router-dom"; const App = () => { return ( /**/

테스트

); };로 했을 경우 정상적으로 테스트가 나오는걸 확인하였습니다.import router from "./routers/routes"; import { RouterProvider } from "react-router-dom"; const App = () => { return (

테스트

); };주석을 해제하고 테스트하면 화면에not found 테스트이렇게 출력이 되는걸 보니Router부분에서 not found가 출력되는걸 확인하였습니다.route.js const router = createBrowserRouter([ { path: "/", //path: process.env.PUBLIC_URL, element: , loader: ScheduleMainLoader, children: [ { //path: process.env.PUBLIC_URL, //path:/ index: true, element: , }, ], }, ]); App.js const AppProvider = ({ contexts, children }) => contexts.reduce( (prev, context) => React.createElement(context, { children: prev, }), children ); const App = () => { return ( ); };route 설정에서 path를 변경해보았지만 not found만 계속 출력되는 상황입니다.검색을 해보는 중이지만 뚜렷한 방법을 찾지 못해 글을 올리게 되었습니다.선배님들의 팁이나 노하우 부탁드립니다.

풍월상신(가니메디안) · Accepted Answer

router 의 children 각각에도 path 가 지정되어야 하는데 누락된 것 같습니다.제 연습장의 router 컴포넌트를 참고로 남겨요. export const router755 = createBrowserRouter([ { element: , children: [ { errorElement: , children: [ { path: "/", element: }, { path: "posts", children: [ { index: true, ...PostsRoute }, { path: ":postId", ...PostRoute }, ], }, { path: "users", children: [ { index: true, ...UsersRoute }, { path: ":userId", ...UserRoute }, ], }, { path: "todos", children: [{ index: true, ...TodosRoute }], }, ], }, ], }, ]);

react-route-dom 사용 시 not found 해결방법

1개의 답변

Q&A 목록