react-router를 2.X에서 4.x로 업그레이드하기

Question

내가 끼워 넣은 프로젝트는 반응이 심한 것으로 보이는 반응이있는 웹 애플리케이션을 가지고 있었다. (예를 들어, npm 패키지가 node_modules에서 꺼내 져서 웹 애플리케이션 다른 파일 경로를 통해 모든 형식을 제거했기 때문에 기본적으로 읽을 수 없습니다.

비동기로 작업 할 때 최선의 노력을했지만 비동기 문제가 있습니다. 't work). 2.X에서 4.X로 업데이트하면이 비동기 문제뿐만 아니라 응용 프로그램도 도움이 될 것이라고 생각합니다. 그래서 이전의 왜곡 된 반응 라우터 패키지에 대한 언급을 삭제하고 최신 최신 복사본을 설치했습니다. 그것은 이전과 크게 다르지 않다는 것을 제외하면 node_modules에 있습니다. 기존 경로 d 작동하지 않으며 GET/POST 요청도 엉망입니다. (하지만 캔트 확인)

이 내 원래의 반응 - 라우터 2.X 코드 :

const { Router, Route, browserHistory,IndexRoute }=ReactRouter; 
//(seems like there are additional references to this in webpack etc that enables it to work) 

render(){ 
    return (
     <div> 
      <Router history={browserHistory}> 
       <Route name='home' path={'/'+contextName}> 
        <IndexRoute component={LandingPage}/> 
        <Route name='templates' path='templates'> 
         <IndexRoute component={JobPage}/> 
         <Route path=':reconDate&:templateId' component={JobDetailPage}/> 
        </Route> 
       <Route name='report' path='report' component={ReportPanel}/> 
      </Route> 
      <Route path='*' component={NotFoundPage}/> 
     </Router> 
    <div> 

이 내가 현재 (반응-라우터 4.X)가 무엇 :

import { Router, Route, Switch} from 'react-router'; 

import createBrowserHistory from 'history/createBrowserHistory' 

const customHistory = createBrowserHistory() 

render(){ 
    return (
     <div> 
      <Router history={customHistory}> 
       <div> 
        <Route name='home' path={'/'+contextName} component={LandingPage}/> 
        <Switch> 
         <Route name='templates' path={'/'+contextName + 'templates'} component={JobPage}/> 
         <Switch> 
          <Route path={'/'+contextName + 'templates/:reconDate&:templateId'} component={JobDetailPage}/> 
         </Switch> 
         <Route name='report' path={'/'+contextName + 'report'} component={ReportPanel}/> 
         <Route path='*' component={NotFoundPage}/> 
        </Switch> 
       </div> 
      </Router> 
     </div> 

을

아무도 도와 줄 수 있습니까? 이것은 내 주요 문제가 아니지만 내 주요 문제에서 내 머리카락을 너무 많이 찢어 봤는데, 나는 그것이 반응 라우터를 업그레이 드하는 것이 가치가 있다고 생각하고 내 비동기 문제 (표시되지 않음)를 처리하는 것이 더 쉬운 지 봅니다. 여기에 단순위한)

그래서 유일한 경로는 다음과 같습니다 다른

/compare (contextName = 'compare') 
/compare/templates 
/compare/templates/:reconDate&:templateId 
/compare/report 

무엇이든은 notFoundPage

Answer 1

BrowserRouter을 사용하고 history={customHistory} 필요하지 마십시오 줄 것입니다. 핵심 React Router가 react-router-dom을 사용하도록 전환되었습니다.

https://codeburst.io/react-router-v4-unofficial-migration-guide-5a370b8905a