React Router Nested Routes?

Question

So I have a React application which has the main routes of

/
/projects
/gallery
/about

I want to have a nested route that looks like

/projects/skout

I am not sure why, but this route is not rendering the proper HTML from the respective component file. It is just empty.

App Component

class App extends Component {

  constructor(props) {
    super(props);
    this.child = React.createRef();
  }

  render() {

    let routes = (
      <Switch>
        <Route exact path="/projects/skout" Component={Skout} />
        <Route exact path="/about" component={About} />
        <Route exact path="/projects" component={Projects} />
        <Route exact path="/gallery" component={Gallery} />
        <Route exact path="/" component={Home} />
        <Redirect exact to="/" />
      </Switch>
    )

    return (
      <BrowserRouter>
        <div className="App" styleName="main-wrapper">
          <Layout>
              {routes}
          </Layout>
        </div>
      </BrowserRouter>

    );
  }
}

export default CSSModules(App, styles);

Skout Component

import React from 'react';

const skout = (props) => (
    <div>
        <span className="container">
            <div className="row">
                <h1>
                    Gallery
                </h1>
            </div>
            <span className="container">
                <p>
                    Storage for Photos, Ideas, and Thoughts
                </p>
            </span>
        </span>
    </div>
)

export default skout;

Do I have to put a route inside the /projects component?

Did you try this => https://stackoverflow.com/questions/41474134/nested-routes-with-react-router-v4 — Abin Thaha, Sep 14 '18 at 04:36

score 0 · Answer 1 · answered Sep 14 '18 at 06:31

You need to render matched route component inside Layout as they are nested routes:

  export const Layout = ({ children }) => (
     <React.Fragment>
            {children}
     </React.Fragment>
   )

But in react router v4, nested routes needs to render separately. You need put routes inside Layout components.

React Router Nested Routes?

App Component

Skout Component

1 Answers1