Kann nicht erhalten/mit React Router

Question

Ich habe 2 Dateien jsx:

Wenn ich auf localhost zugreifen: 8080 Es ist normal. Aber wenn ich auf localhost zugreifen: 8080/home Es ist Show-Nachricht im Browser kann nicht GET/home

Wie kann ich beheben?

Home.jsx:

import React from 'react'; 


class Home extends React.Component{ 

    constructor(props) { 
     super(props); 

    } 

    render(){ 

     return(
      <div> 
       <h1>Home ...</h1> 
      </div> 

     ) 
    } 
} 
export default Home; 

index.jsx:

import React from 'react'; 
import {render} from 'react-dom'; 
import Home from './Home.jsx'; 
import { Router, Route, Link, browserHistory, IndexRoute } from 'react-router'; 



class App extends React.Component { 

    render(){ 
     return(
      <div> 
       <ul> 
        <li>Home</li> 
       </ul> 
       {this.props.children} 
      </div> 
     ); 
    } 


} 

render((
    <Router history = {browserHistory}> 
     <Route path = "/" component = {App}> 
     <IndexRoute component = {Home} /> 
     <Route path = "home" component = {Home} /> 

     </Route> 
    </Router> 

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

Datei webpack.config.js:

var webpack = require('webpack'); 
var path = require('path'); 

var BUILD_DIR = path.resolve(__dirname, 'src/client/public'); 
var APP_DIR = path.resolve(__dirname, 'src/client/app'); 

var config = { 
    entry: APP_DIR + '/index.jsx', 
    output: { 
    path: BUILD_DIR, 
    filename: 'bundle.js' 
    }, 
    devServer: { 
     inline: true, 
     port: 8080, 
    contentBase: "./src/client", 

    hot: true 
    }, 
    module : { 
    loaders : [ 
     { 
     test : /\.jsx?/, 
     include : APP_DIR, 
     loader : 'babel-loader', 
     query: { 
       presets: ['es2015', 'react'] 
      } 
     } 
    ] 
    } 
}; 

module.exports = config; 

Answer 1

In yo ur devServer Konfiguration, müssen Sie die historyApiFallback Einstellung:

devServer: { 
     inline: true, 
     port: 8080, 
     contentBase: "./src/client", 
     historyApiFallback: true, 
     hot: true 
    }, 

Das die devServer sagt immer die Wurzel HTML-Seite zurückzukehren und lassen Sie den Client das Routing zu tun. Mit anderen Worten, zu Fallback zu der Wurzel-API-Route.

Answer 2

Änderung <Route path = "home" component = {Home} />-<Route path = "/home" component = {Home} />