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

Question

I'm learning React, and I need to add some routes with React Routes.

I have installed react-router with npm install react-router.

This is the main js where I have to declare the routes

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


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

Navigating to / works fine. But when I go to /example I'm getting:

Cannot GET /example

error

What am I doing wrong?

This way I have the same issue:

<Router>
    <Route path="/" component={App} />
    <Route path="/example" component={Example}/>
</Router>

Example Component

import React from 'react';

class Example extends React.Component {
    render(){
        return <div>Example</div>
    }
}

export default Example

This is the Link:

<Link to={'/example'}>aa</Link>

There are no errors in console.

After the change I'm getting this errors in console (Caused by the Link)

index.js (line 27585) Warning: [react-router] Location "/" did not match any routes

index.js (line 27585) Warning: [react-router] Router no longer defaults the history prop to hash history. Please use the hashHistory singleton instead. https://github.com/ReactTraining/react-router/blob/master/upgrade-guides/v2.0.0.md#no-default-history

Answer 1

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