react-routerのネストされたrouths webpackでのリフレッシュエラー

Question

Link to="/Home/PageA"を使用するとうまくいきますが、ブラウザで「/ Home/PageA」と入力するとエラーが発生します。

これはWebPackとReact-Routerの間に何らかの競合がありますか？それを修正する方法はありますか？

Thx in Advance。ここ

は私のpicが説明され、ここで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

これはサーバー側のレンダリングに関するものです。あなたはルータオブジェクトとのサーバー側のマッピングパスを持つ必要があります。 WebpackDevServer

あなたは、デフォルトでbrowserHistoryを使用していて、それを適切に設定する方法の詳細ここで読むことができますをチェックアウト：

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