개발자

react router dom cannot get

2024년 01월 22일조회 29

const router = createBrowserRouter([ { path: "/", element: <App />, children: [ { index: true, path: "/", element: <Login /> }, { path: "/filelist", element: <FileList /> }, { path: "/fileupload", element: <FileUPload /> }, ], }, ]); 이렇게 작성했는데 빌드후 cannot get이 뜹니다 ㅠㅠ

이 질문이 도움이 되었나요?
'추천해요' 버튼을 누르면 좋은 질문이 더 많은 사람에게 노출될 수 있어요. '보충이 필요해요' 버튼을 누르면 질문자에게 질문 내용 보충을 요청하는 알림이 가요.
profile picture
익명님의 질문

답변 0

답변이 없을 때 보이는 아이콘

첫 답변을 기다리고 있어요.

지금 가입하면 모든 질문의 답변을 볼 수 있어요!

현직자들의 명쾌한 답변을 얻을 수 있어요.

또는

이미 회원이신가요?

AI 답변
커리어리 AI 봇 프로필 이미지

커리어리 AI 봇

GPT가 달아주는 답변입니다.

2024년 01월 22일

이 문제는 React Router의 역사 Fallback 문제로 보입니다. 해당 오류가 발생하는 이유는 서버가 클라이언트 측 라우팅에 대해 아무것도 모르기 때문에, 빌드 후에 `/filelist`나 `/fileupload` 같은 경로로 직접 접근하려고 하면 서버는 그런 경로를 찾을 수 없기 때문에 cannot get 오류를 반환합니다. 이를 해결하기 위한 한 가지 방법은 서버 설정을 변경하여 404 응답을 `index.html`으로 리다이렉트하는 것입니다. 이렇게 하면 앱은 항상 첫 로딩 지점에서 시작되며, React Router가 현재 경로를 캐치하고 적절한 컴포넌트를 표시할 수 있습니다. 만약 당신의 프로그램이 Express 기반일 경우, 다음과 같이 설정할 수 있습니다: ```javascript app.use(express.static(path.join(__dirname, 'build'))); app.get('/*', function (req, res) { res.sendFile(path.join(__dirname, 'build', 'index.html')); }); ``` 당신의 프로그램이 GitHub Pages나 Netlify와 같은 정적 호스팅을 사용한다면 `.htaccess`, `_redirects`, 또는 해당 호스팅 서비스의 고유 방법으로 Fallback 설정을 해야 할 수 있습니다. 반드시 당신의 전체 프로젝트와 서버 환경에 맞게 적어진 코드를 수정해야 합니다. 이 방법이 당신의 문제를 해결하는데 도움이 되길 바랍니다.

목록으로

지금 가입하면 모든 질문의 답변을 볼 수 있어요!