Why is react router throwing 'Cannot GET /example' error?

Your example route is nested within your parent route so you should't need a / in /example.

Also you can try setting an IndexRoute with whatever your home component would be so that it has a reference.

Linking to the route would probably help so you can see what is coming up in the URL to make sure its what your looking for.

Your App component shouldnt really be rendering anything other than {this.props.children} because that is where all the components that the router is handling will be rendered, the router doesn't just render things from the main file it controls the routes and which components to mount in the App component(Usually called an AppController) so you need to build a Home component that will render at the / route and declare that using IndexRoute in your router then set Links between the components and if everything is done properly than you should be good to go.

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;

Example Component:

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 component:

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

I got exactly the same problem as the question.

After trying the above answer, I am still getting the same error, Interestingly, there is also syntax error in above answer where <IndexRoute component={Home}> must be closed or self closed.

Two ways I could make my thing work:

1) Not a perfect way but other way of making it work is using hashHistory Just import { Router, Route, IndexRoute, hashHistory } from 'react-router'; and modify Router as <Router history={hashHistory}>

Now URL, looks like http://localhost:5000/#/example?_k=a979lt

2) You can use useHistory as well.

But this also adds # in the URL but it looks like http://localhost:5000/#/example Where query parameters aren't present in the link because we'll set them as false..

3) In my case, with browserHistory, if I use my Routes as localhost:5000/#/example then it works fine and without hash it doesn't.

Check this link for more details for each of them. https://github.com/reactjs/react-router/blob/master/upgrade-guides/v2.0.0.md

EDIT: Finally, I got my solution to make it work using browserHistory. Please check this out. https://stackoverflow.com/a/38585657/3241111

as of react router v4, if you are using webpack with react you need to add devServer settings in your webpack.config.js file to prevent this issue. just make sure that your devServer config has historyApiFallback set to true, if it is not you will get Cannot get error in browser , i just put a simple devServer config from my webpack.config.js file that currently i'm working on , maybe helps someone....

module.exports = {

 ...

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

 ...

}