2017-09-17 2 views
0

에 가져 오는 URL이 내가있을 때 반작용 라우터 같은 (또는 PARAMS없이)앱이 404 얻을 반작용 내 응용 프로그램에서 PARAMS

const App =() => (
    <Router> 
    <Route exact path="/" component={Landing} /> 
    <Route path="/about" component={About} /> 
    <Route path="/searching/:term" component={Searching} /> 
    </Router> 
); 

export default App; 

모든 루트 온 클릭 onchange를, onSubmit (일부 핸들 잘 작동, 기타.). url (매개 변수없이 라우트)을 브라우저에 입력하면 mypage.com/about과 같이 작동합니다. params가있는 경로 (위의 코드에서 세 번째 경로 임)가 작동하지 않습니다. param을 사용하여 url에 액세스 할 때마다 오류 404가 발생합니다. 해결 방법을 알려 주실 수 있습니까?

감사합니다.

/* EDIT */

추가 검색 구성 요소 :

const Searching = (props) => (
<div> 
    <PagesHeader /> 
    <Container className="pageContainer"> 
     <Row> 
      <Col md={{size: 10, offset: 1}}> 
       Searching result for: <b>{props.match.params.term}</b> 
      </Col> 
     </Row> 
    </Container> 
    <Footer /> 
</div> 
); 
export default Searching; 
+0

그래서'localhostOrWhatever : someport/searching/abcd'에 가면 404가됩니까? – Li357

+0

Hello @ AndrewLi. 예, 당신이 쓴 것처럼. –

+0

아마 https://stackoverflow.com/q/27928372/5647260 – Li357

답변

0

나는이를 위해 soultion을 발견했다. 문제는 내 bundle.js 파일의 위치에서만 발생하므로 경로 만 변경해야했습니다.

내 프로덕션 버전의 라우팅과 관련된 다음 문제가 있습니다. React Router를 버전 4.2에서 사용합니다. 문제는 브라우저에 URL을 입력하면 생산 버전에만 해당되며 404가 반환됩니다.

그래서 클릭하여 다른 구성 요소에 연결하면 모든 것이 정상입니다. 일부 페이지의 URL을 복사/붙여 넣으면 404가 반환됩니다.

가장 좋은 방법은 서버 부분 (예 : Express.js의 Node.js)에서 라우팅해야합니다. 내 응용 프로그램은 프런트 엔드 라우팅을 완벽하게 지원하며 호스팅은 Node.js를 지원하지 않습니다. 백 엔드 (API)가 Laravel에 있습니다.

내 솔루션 내 호스팅에 .htaccess 파일에이 코드를 추가하는 것입니다

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

두 번째 솔루션은 surge.vs 또는 GitHub Pageshere is fantastic article for this 같은 CDN입니다.

아마도 누군가에게 도움이 될 수 있습니다.

관련 문제