React router не соответствует ни одному маршруту

Question

Я пытаюсь сделать некоторые основные примеры с react-router, но он просто не работает. Код и идея являются 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> 
    ); 
    } 
} 

Это делает App компонент, но и любой другой маршрут не работает, как http://localhost:8080/#/about?_k=nwt0sq, что маршрут рукой за мной: Location "/about" did not match any routes.

Repos маршрут (indexRoute) тоже не работает.

Кстати, это index.js:

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

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

Любая идея? Я читал другие вопросы и искал, но не могу решить это.

Вот мои компоненты:

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

Я думаю, что я получил свою ошибку, ваш маршрут не срабатывает союзница указать path.you необходимости поставить слэш для каждого пути, как это: -

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

Answer 2

попробовать рефакторинг вашего app.js следующим образом:

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

вам нужно пройти вниз маршруты к вашему основному компонент приложения.