How can I use react router in nested page with "exact paramater" for my this scenario?

Question

I need access to other components from the Router Home page. With this structure that I installed, the "404" page does not open. Also, when I apply the exact path ="/" parameter to Private route, the Home component does not render. How do I solve these problems?

Thank you in advance for your answers.

This is my app.js =>

<Router>
        <Switch>
          <Route exact path="/login">
            <Login />
          </Route>
          <Route exact path="/register">
            <Register />
          </Route>
          <PrivateRoute exact path="/search">
            <Search />
          </PrivateRoute>
          <PrivateRoute exact path="/"> // This is the part where there's a problem. exact works when I don't add it.
            <Home />
          </PrivateRoute>
          <Route path="*">
            <Fourzerofour />
          </Route>
        </Switch>
</Router>

This is my Home.js =>

     <Header />
        <Grid className={classes.container} container spacing={3}>
            <Grid className={classes.leftSidebar} item md={3}>
                <LeftSidebar />
            </Grid>
            <Grid item xs={12} md={6}>
                <Switch>
                    <Route path="/">
                        <HomePageFeed />
                    </Route>
                    <Route path="/profile">
                        <ProfileDetail />
                    </Route>
                    <Route path="/pets/:id" component={PetDetail} />
                </Switch>
            </Grid>
            <Grid className={classes.rightSidebar} item xs={12} md={3}>
                <RightSidebar />
            </Grid>
        </Grid>

Use something like this: ``. – Ajeet Shah Nov 01 '20 at 13:09 — Ajeet Shah, Nov 01 '20 at 13:09

score 1 · Accepted Answer · answered Nov 01 '20 at 13:52

If you don't use exact, it'll never render Fourzerofour because all paths matches "/".

But, if you use exact then only path allowed for your home component is "/". That means /profile and /pets/:id aren't going to render.

So, to fix this you probably have to specify all paths for your home component

<PrivateRoute exact path={["/", "/profile", "/pets/:id"]}>
   <Home />
</PrivateRoute>

How can I use react router in nested page with "exact paramater" for my this scenario?

1 Answers1