React-router: Component not rendering from route.

[andrewpillar]

So I'm learning react-router, and have encountered and issue, whenever I click on a a link the component that it uses does not render to the screen. I have checked the console and no error messages are being displayed.

I only have two routes set up, Inbox and About, which just display some text when rendered.

Here is the code I have right now:

import React from 'react';
import { Router, Route, Link } from 'react-router';
import createBrowserHistory from 'history/lib/createBrowserHistory';

class Inbox extends React.Component {
    render() {
        return (
            <div>
                <h1>Inbox</h1>
                    This is the inbox.
            </div>
        );
    }
}

class About extends React.Component {
    render() {
        return (
            <div>
                <h1>About</h1>
                This is the about section.
            </div>
        );
    }
}

class App extends React.Component {
    render() {
        return (
            <div>
                <div><Link to="/inbox">Inbox</Link></div>
                <div><Link to="/about">About</Link></div>
            </div>
        );
    }
}

React.render((
    <Router history={createBrowserHistory()}>
        <Route path="/" component={App}>
            <Route path="inbox" component={Inbox} />
            <Route path="about" component={About} />
        </Route>
    </Router>
), document.body);

The App component is rendered normally without any errors, so that the Inbox, and About Links are displayed.

When I click on the Inbox link for example it should display Inbox this is the inbox, but it doesn't, and as I said before no error message is displayed.

Any ideas?

I'm using broswerify and babelify to compiled it down to vanilla JS.

[knowbody]

you are missing { this.props.children } in your App component. add it wherever you want the other components to be mounted. For example:

class App extends React.Component {
    render() {
        return (
            <div>
                <div><Link to="/inbox">Inbox</Link></div>
                <div><Link to="/about">About</Link></div>
                { this.props.children }
            </div>
        );
    }
}

you can have a look at the example here.

[hussaintamboli]

@knowbody The example link from above is broken.

[knowbody]

@hussaintamboli maybe because the answer is 3 years old. In the meantime, they were 4 major releases of react-router. Have a look at the docs or ask a question on StackOverflow