error-routter error error error with webpack

Question

Когда я использую Link to="/Home/PageA" Это хорошо работает, но когда я обновляю страницу или набираю «/ Home/PageA» в brower, пакет будет ошибочным.

У этого есть конфликт между 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

это о рендеринге на сервере. Вам нужно иметь путь сопоставления сторон сервера с объектом маршрутизатора. Проверьте 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