javascript - React router did not match any route

Question

i trying to make some basic examples with react-router but it just doesn't works. The code and the idea are 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>
    );
  }
}

It renders the App component, but any other route doesn't works, like http://localhost:8080/#/about?_k=nwt0sq, that route throw's me: Location "/about" did not match any routes.

The Repos route (indexRoute) doesn't works too.

BTW, this is the index.js:

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

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

Any idea? I was reading another questions and googling around but can't solve this.

Here are my Components:

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

I think I got your mistake, your route doesn't actually specify a path.you need to put slash for every path like this:-

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