sppc42 sppc42 - 2 months ago 18
React JSX Question

React-router not able to load nested pages

Am just not able to make react-router load the nested pages.

I have the following configuration for React-Router

import React from 'react';
import { Router, Route, IndexRoute, useRouterHistory } from 'react-router';
import { createHistory } from 'history';

import App from './components/app';
import Authors from'./components/authors/authorPage';
import About from'./components/about/aboutPage';

const appHistory = useRouterHistory(createHistory)({ basename: "/" });

const Routes = () =>
{
const routes = (
<Route path="/" component={App}>
<Route path="/about" component={About}/>
<Route path="/authors" component={Authors}/>
</Route>
);

return (
<Router history={ appHistory }>
{routes}
</Router>);
};

export default Routes;


And its getting called via links in the header page as

import React from 'react';
import { Router, Route, Link } from 'react-router';

const Header = () =>
{
return (
<nav className="navbar navbar-default">
<div className="container-fluid">
<a href="/" className="navbar-brand">
<img src="images/pluralsight-logo.png"/>
</a>
<ul className="nav navbar-nav">
<li><Link to="/">Home</Link></li>
<li><Link to="/about">About</Link></li>
<li><Link to="/authors">Authors</Link></li>
</ul>
</div>
</nav>
);
};

export default Header;


App component is

import Home from './homePage';
import Header from './common/header';

const App = () =>
{
return (
<div>
<Header />
<div className="container-fluid">
<Home/>
</div>
</div>
);
};

export default App;


The root App loads just fine and I see the main root page. However, clicking on any of the link just changes the address bar to that link (
http://localhost:9005/about
) but nothing renders, the about page never loads.

In fact, if I manually enter that page (
http://localhost:9005/about
) I get the error

Cannot GET /about

Answer

You're missing children in the spot where you are expecting the routes to load.

const App = () =>
{
    return (
        <div>
            <Header />
            <div className="container-fluid">
                <Home/>

                {this.props.children} <--- Route components will appear here
            </div>
        </div>
    );
};

Presumably you don't want to show Home as well as other pages at the same time, so update your route config with an IndexRoute so Home will appear on the root url.

<Route path="/" component={App}>
    <IndexRoute component={Home}/>
    <Route path="/about" component={About}/>
    <Route path="/authors" component={Authors}/>
</Route>