구성 요소로 올바르게 라우팅하는 데 문제가 있는 React 라우터

내 프로그램은 로컬 경로/experience/:id로 이동할 때 구성 요소로 라우팅되어야 하지만 localhost로 실행될 때만 npm start에서 작동합니다.

현재 내 사이트를 /test 하위 디렉토리( willfeldman.com/test )에 업로드했습니다. 라우터에 basename="test"를 설정했습니다. 내 사이트에 코드를 업로드한 후 경로/test/experience/1로 이동하면 빈 페이지가 표시되고 Uncaught SyntaxError: Unexpected token '<' (at main.694b5be9.js:1:1)라는 콘솔 오류가 표시됩니다.

몇 가지 사항(빈 페이지 수정과 관련이 있는지 확실하지 않음):

내 App.jsx 파일을 App.tsx라는 Typescript 파일로 변환했습니다.

Hostgator를 사용하여 내 사이트를 호스팅하고 있습니다

useParams에서 라우팅하는 내 <ExperienceView /> 구성 요소의 반응 라우터에서 /test/experience/1를 사용하고 있습니다.

Create React App documentation 에 제안된 대로 다음 코드를 포함하는 public 폴더에 .htaccess가 있습니다. 내 라우터에 지정된 대로 유효하지 않은 URL을 내 React 오류 구성 요소<Error />로 다시 라우팅하는 데 작동하지만 경로/test/experience/1에 대해서는 작동하지 않습니다.

Options -MultiViews
RewriteEngine On
RewriteCond %{REQUEST_FILENAME} !-f
RewriteRule ^ index.html [QSA,L]

build가 포함된 npx lite-server의 정적 파일을 실행할 때 동일한 문제가 발생했으며 이를 해결한 방법은 build/test/experience , index.html 및 manifest.json가 포함된 static라는 폴더를 업로드하는 것이었습니다. ) 폴더. 이로 인해 구성해야 하는 라우터의 설정이 있는 것일 수 있다고 생각하지만 확실하지 않습니다.

소스 코드: https://github.com/willfeldman/Portfolio -> https://willfeldman.com/test에 업로드됨

Reference

이 문제에 관하여(구성 요소로 올바르게 라우팅하는 데 문제가 있는 React 라우터), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/willfeldman/react-router-having-an-issue-with-correctly-routing-to-component-fm1

텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.

우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다