CODEWITHSUNDEEP
reactjsreact-router
J3Y
J3Y

Reputation: 1853

React router displaying content at root route

I'm using React router for a SPA, but I'm not sure how to display some content on the index route "/".

My top level router configuration is just:

<Route path="/" component={App}>
    // ...
</Route>

The top level component renders the header/footer and other common elements:

<nav>
    // ...
</nav>

{children}

<nav className="footer">
    // ...
</nav>

Child routes are working fine, and they render within the App component. However, how do I render some content at the root route so it's not just a blank page?

Upvotes: 1

Views: 1107

Answers (1)

Season
Season

Reputation: 4366

Say the content you would like to serve for the root route in <App> is <Home>, below is referenced from the guide of react-route.

<Router>
  <Route path="/" component={App}>
    <IndexRoute component={Home}/>
    <Route path="accounts" component={Accounts}/>
    <Route path="statements" component={Statements}/>
  </Route>
</Router>

And this is what <App> might look like.

const App = React.createClass({
    render() {
        return {this.props.children || <Home/>};
    }
});

Upvotes: 1

Related Questions