React-router bundle.js와 함께 Webpack 사용하기

Question

Webpack 및 react-rounter를 사용하여 프로젝트를 빌드합니다. 내가 "http://127.0.0.1:3001/purchase"를 요청하면 작업이

ReactDOM.render(
 
    <Provider store={store}> 
 
     <Router history={ browserHistory }> 
 
      <Route path='/' component={ App } > 
 
       <IndexRoute component={ Home } /> 
 
       <Route path="purchase" component={ Purchase } /> 
 
       <Route path="purchase/:id" component={ Purchase } /> 
 
      </Route> 
 
     </Router> 
 
    </Provider>, 
 
    document.getElementById('example') 
 
);

입니다 : 이 내 코드입니다! 주소 "http://127.0.0.1:3001/purchase/a"에 오류가 있습니다. enter image description here

내 WebpackDevServer의 설정은 다음과 같습니다 : 오류 메시지를 볼

new WebpackDevServer (webpack(config), { 
 
    publicPath: config.output.publicPath, 
 
    hot: true, 
 
    noInfo: false, 
 
    historyApiFallback: true 
 
}).listen(3001, '127.0.0.1', function (err, result) { 
 
     if (err) { 
 
      console.log(err); 
 
     } 
 
     console.log('Listening at localhost:3001'); 
 
    });

나는 문제가, 도와주세요 모르겠어요!

Answer 1

index.html에서 bundle.js의 경로를 설명하기 위해 상대 경로를 사용하고 있습니다.

당신은

절대 경로는 루트 디렉토리와 파일이나 폴더가 포함 된 다른 모든 하위 디렉토리를 포함하여 index.html을에 bundle.js에 대한 절대 경로를 사용해야합니다.

index.html에서 동일한 경로에있는 경우.

예 :

public/index.html

public/bundle.js

이가 문제를 해결하는 것입니다.

<script src="/bundle.js"></script>