Warum reagieren router werfen 'kann Nicht GET /example' Fehler?

Dein Beispiel route geschachtelt innerhalb Ihrer übergeordneten Strecke, so sollten Sie nicht brauchen, ein / im /example.

Sie können auch versuchen, die Einstellung einer IndexRoute mit was auch immer Ihr Zuhause Komponente so sein würde, dass es einen Verweis.

Verknüpfung zu der route würde wahrscheinlich helfen, so dass Sie sehen können, was bis kommenden in der URL, um sicherzustellen, seine, was Sie suchen.

Ihre App-Komponente sollte nicht wirklich sein-rendering alles andere als {this.props.children} weil das ist, wo alle Komponenten, dass der router das handling wird gerendert, den router nicht einfach machen, die Dinge aus der main-Datei, die es steuert die Routen und die Komponenten, montieren Sie in die App-Komponente(in der Regel genannt AppController) so dass Sie brauchen, um ein Haus zu bauen Komponente zum Rendern bei der / route und erklären, dass mit IndexRoute im router dann einstellen der Links zwischen den Komponenten und wenn alles richtig gemacht haben, als Sie sollten gut zu gehen.

Link:

<Link to="example">
  Click Me!
</Link>

Main:

import React from 'react';
import {ReactDOM, render} from 'react-dom';
import App from './Components/AppComponent';
import Home from './Components/Home';
import Example from './Components/ExampleComponent';
import { Router, Route, IndexRoute, Link, IndexLink, browserHistory } from 'react-router'


ReactDOM.render((
    <Router history={browserHistory}>
        <Route path="/" component={App}>
            <IndexRoute component={Home}>
            <Route path="example" component={Example}/>
        </Route>
    </Router>
), document.getElementById('App'));

AppController:

import React from 'react';

class App extends React.Component {

  render() {
    return (
      <div>
        <div className="routerView">
          {this.props.children}
        </div>
      </div>
    );
  }
}

export default App;

Beispiel-Komponente:

import React from 'react';
import {Link} from 'react-router';


class Example extends React.Component {
    render(){
        return(
          <div>
              Example
              <Link to="/">Click Me!</Link>
          </div>
        )
    }
}

export default Example

Home-Komponente:

import React from 'react';
import {Link} from 'react-router';

class Home extends React.Component {
    render(){
        return (
            <div>
               Home
               <Link to="/example">To Example!</Link>
            </div>
        )
    }
}

export default Home

als zu reagieren-router v4, wenn Sie mit webpack mit reagieren, müssen Sie devServer Einstellungen in Ihrem webpack.config.js - Datei um dieses Problem zu vermeiden. stellen Sie sicher, dass Ihre devServer config hat historyApiFallback eingestellt true, wenn es ist nicht Sie erhalten Nicht die Fehlermeldung im browser , ich habe nur eine einfache devServer config von meinem webpack.config.js Datei, momentan bin ich dabei , vielleicht hilft es jemandem....

module.exports = {

 ...

 devServer: {
    contentBase: path.join(__dirname, 'dist'),
    compress: true,
    port: 3000,
    open: true,
    historyApiFallback: true,
    stats: 'minimal'
  }

 ...

}