React Router hat keine Route

Question

Ich versuche, einige grundlegende Beispiele mit react-router zu machen, aber es funktioniert einfach nicht. Der Code und die Idee sind simples:

import React, { Component } from 'react'; 
import { Router, Route, browserHistory, IndexRoute } from 'react-router'; 
import App from './App'; 
import About from './About'; 
import Repos from './Repos'; 
// import NotMatch from './NotMatch'; 

export default class RouterApp extends Router { 
    render() { 
    return (
     <Router history={ browserHistory }> 
     <Route path='/' component={ App } > 
      <IndexRoute component={ Repos } /> 
      <Route path='about' component={ About } /> 
     </Route> 
     </Router> 
    ); 
    } 
} 

Es die App Komponente macht, aber jede andere Route nicht funktioniert, wie http://localhost:8080/#/about?_k=nwt0sq, dass Route Wurf mich: Location "/about" did not match any routes.

Die Route Repos (indexRoute) funktioniert auch nicht.

BTW, ist dies die index.js:

import React from 'react' 
import { render } from 'react-dom' 
import RouterApp from './modules/Router' 

render(<RouterApp/>, document.getElementById('app')) 

Jede Idee? Ich las noch ein paar Fragen und googelte herum, konnte das aber nicht lösen.

Hier sind meine Komponenten:

App.js

import React, { Component } from 'react'; 

export default class App extends Component { 
    render() { 
     return <h1> APP </h1>; 
    } 
} 

Repos.js

import React, { Component } from 'react'; 

export default class Repos extends Component { 
    render() { 
     return (
      <section> 
       <h2>Repos</h2> 
       <ul> 
        <li>Repo 1</li> 
        <li>Repo 2</li> 
        <li>Repo 3</li> 
        <li>Repo 4</li> 
       </ul> 
      </section> 
     ); 
    } 
} 

About.js

import React, { Component } from 'react'; 

export default class About extends Component { 
    render() { 
     return (
      <section> 
       <h2>About</h2> 
       <p> 
        Pariatur eum tenetur in iste maiores est architecto dignissimos. 
        Vero non explicabo veniam quam debitis. 
        Deleniti rerum eaque ratione provident delectus architecto veniam. 
        Ipsum omnis dicta eum dolore ea. 
       </p> 
      </section> 
     ); 
    } 
} 

Answer 1

Ich glaube, ich Ihren Fehler bekam, Deine Route ist nicht aktiv angeben Verbündete eine path.you Notwendigkeit slash für jeden Pfad so: -

render() { 
    return (
     <Router history={ browserHistory }> 
     <Route path='/' component={ App } > 
      <IndexRoute component={ Repos } /> 
      <Route path='/about' component={ About } /> 
     </Route> 
     </Router> 
    ); 
    } 

Answer 2

bereiten app.js Refactoring wie folgt:

export default class App extends Component { 
    render() { 
     return (<div> (this.props.children} </div>): 
    } 
} 

Sie die Routen zu Ihrem Haupt zu überliefern müssen App-Komponente.