react-webpack에서 라우터 중첩 된 라우터 새로 고침 오류

Question

Link to="/Home/PageA"을 사용할 때 문제가 없지만 브라우저에서 "/ Home/PageA"을 입력하면 페이지가 새로 고침되거나 번들에 오류가 발생합니다.

WebPack과 React-Router간에 충돌이 있으며 해결 방법은 무엇입니까?

Thx in Advance. 여기

내 그림 설명 여기에 actPic errorPic

내 코드입니다 : 여기

import React, { Component } from 'react'; 
import ReactDOM from 'react-dom'; 
import { Router, Route, IndexRoute, browserHistory, Link } from 'react-router' 

    const App = (props) => { 
     console.log("App", props); 
     const key = 'root'; 
     return (
      <div> 
       {React.cloneElement(props.children || <div />, { key })} 
      </div> 
     ); 
    }; 


    const LoginPage = (props) => { 
     console.log("Login", props); 

     return (
      <div className="Image"> 
       <h1>this is LoginPage</h1> 
      </div> 
     ); 
    }; 

    const HomePage = (props) => { 
     console.log("Home", props); 
     return (
      <div className="Image"> 
       <li><Link to="/Home/PageA">Tab 1</Link></li> 
       <h1>this is Home page</h1> 
       {React.cloneElement(props.children || <div />, { key: props.pathname })} 
      </div> 
     ); 
    }; 

    const PageA = (props) => { 
     console.log("pageA", props); 
     return (
      <div> 
       <input type='button' value="back" onClick={props.router.goBack}></input> 
       this is pageA; 
      </div> 
     ); 
    }; 



    ReactDOM.render((
     <Router history={browserHistory}> 
      <Route path="/" component={App}> 
       <Route path="Login" component={LoginPage}> 
       </Route>[enter image description here][1] 
       <Route path="Home" component={HomePage}> 
        <Route path="PageA" component={PageA}> 
        </Route> 
       </Route> 
      </Route> 
     </Router> 

    ), document.getElementById('container')); 

내 webPack.config입니다

module.exports = { 
    devtool: 'source-map', 
    entry: __dirname + "/app/app.js", 
    output: { 
     path: __dirname + "/app", 
     filename: "bundle.js" 
    }, 
    module: { 
     loaders: [ 
      { 
       test: /\.json$/, 
       loader: "json" 
      }, { 
       test: /\.js$/, 
       exclude: /node_modules/, 
       loader: 'babel', 
       query: { 
        presets: ['es2015', 'react'] 
       } 
      }, { 
       test: /\.css$/, 
       loader: 'style!css' 
      }, { 
       test: /\.(png|jpg)$/, 
       loader: 'url?limit=25000' 
      } 
     ] 
    }, 
    devServer: { 
     port: "9023", 
     contentBase: "./app", 
     colors: true, 
     historyApiFallback: true, 
     inline: true 
    } 
} 

Answer 1

서버 측에서 렌더링하는 방법입니다. 당신은 라우터 개체와 서버 측 매핑 경로가 필요합니다. 당신은 기본적으로 browserHistory를 사용 WebpackDevServer

을 확인하고 자세한 내용은 여기를 읽을 수있는 방법을 적절하게 구성 :

https://github.com/ReactTraining/react-router/blob/master/docs/guides/Histories.md#browserhistory

또는 해시 기록을 사용, 그것은 수행하기가 쉽다 :

https://github.com/ReactTraining/react-router/blob/master/docs/guides/Histories.md#hashhistory