CODEWITHSUNDEEP
reactjsreact-router
sppc42
sppc42

Reputation: 3272

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

Upvotes: 1

Views: 688

Answers (1)

azium
azium

Reputation: 20614

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

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

                {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>

Upvotes: 1

Related Questions