how to nest routes in react-router-dom

Question

I have App.js file something like this

import {BrowserRouter,Switch,Route} from 'react-router-dom'

<BrowserRouter>
   <Switch>
      <Route exact path="/" component={LandingPage} />
      <Route path="/searchResults" component={SearchResults} />
   </Switch>
</BrowserRouter>

And {SearchResults} looks like this

<Navbar />
<Switch>
   <Route path="/all" component={All} />
   <Route path="/courses" component={Courses} />
   <Route path="/slides" component={Slides} />
</Switch>

I need to make /searchResults/all, /searchResults/courses and searchResults/slides work
I tried above approach but the output is blank when i go to any of these routes.Only Navbar is rendered.

This is helpful https://stackoverflow.com/questions/42984597/multiple-nested-routes-in-react-router-dom-v4 — Himanshu Pandey, Jun 03 '20 at 17:31

score 1 · Answer 1 · answered Jun 03 '20 at 17:36

You need to add the base path to the link.

import { Switch, Route, useRouteMatch } from "react-router-dom";

const SearchResults = () => {
let { path } = useRouteMatch();
    return (
        <Switch>
            <Route path={`${path}/all`} component={All} />
            <Route path={`${path}/courses`} component={Courses} />
            <Route path={`${path}/slides`} component={Slides} />
        </Switch>
    );
)

Find it in here in one of my sample application

https://github.com/codegeous/react-component-depot/blob/master/src/pages/ReactBasics/index.js

how to nest routes in react-router-dom

1 Answers1