CODEWITHSUNDEEP
reactjs
handsome
handsome

Reputation: 2422

how to render a default component in react

I have a few routes defined

/ (homepage)
/:profile (something like /john and /mary to get user profile)
/backend/profile
/backend/files

this is my main file.

<Router>
    <Switch>
        <Route
            path="/"}
            exact
            strict
            component={Homepage}
        />
        <Route
            path="/:profile"}
            exact
            strict
            component={Profile}
        />
        <Backend>
            <Route path="/backend/profile" exact strict component={BackendProfile} />
            <Route path="/backend/files" exact strict component={BackendFiles} />
        </Backend>
        <Route component={Homepage} />
    </Switch>
</Router>

Everything works fine except when I enter a URL that's not defined. I was expecting to render Homepage component but instead is rendering Admin component

note: I´m not adding here the components because I suspect the issue is how I configured the router

Upvotes: 2

Views: 337

Answers (1)

Drew Reese
Drew Reese

Reputation: 203466

Issue

The Switch returns and renders the first matching Route or Redirect. The caveat to this is that the component Backend isn't either of this and will always be rendered, so the "catch-all" homepage route is never reached.

Solution

Render the backend into a route for it. I suggest also rendering a redirect to your homepage route as a fallback as well, so only one route is handling the homepage rendering.

<Router>
  <Switch>
    <Route
      path="/"}
      exact
      strict
      component={Homepage}
    />
    <Route
      path="/:profile"}
      exact
      strict
      component={Profile}
    />
    <Route
      path="/backend"
      render={() => (
        <Backend>
          <Switch>
            <Route path="/backend/profile" exact strict component={BackendProfile} />
            <Route path="/backend/files" exact strict component={BackendFiles} />
          </Switch>
        </Backend>
      )}
    />
    <Redirect to="/" />
  </Switch>
</Router>

Upvotes: 1

Related Questions