How can I exempt some routes to not hit 404 error if the URL don't match as exact?

Question

I have an app layout like this:

function App() {
    return (
        <Router>
            <Header />
            <main className="py-1">
                <Route path="/admin" component={Admin} />
                <Container>
                    <Switch>
                        <Route path="/" component={HomeScreen} exact />
                        <Route path="/login" component={LoginScreen} exact />
                        <Route path="/sitemap" component={SiteMap} exact />
                        {/* SOME MORE ROUTES LIKE THESE .... */}
                        <Route path="*">
                            <Error404 />
                        </Route>
                    </Switch>
                </Container>
            </main>
            <Footer />
        </Router>
    );
}

export default App;

I am setting an Admin Page and I don't want to put it into Container for some reason like I want to set a sidebar just for the admin page if I put this into the container then it becomes ugly not look like a side bar and I don't want to change the layout of the container as well it's working well for the other components. But if I put the Admin component outside the container then <Switch> thinks it's not a valid URL and the Both Admin + <Error404 /> components loads Simultaneously.

So I want to put some logic here that the Route:

<Route path="*"><Error404 /></Route>

should ignore the URL starting with /admin and which is not wrapped in the <Switch> tag and not hit with the Error404

Is that possible? Is there any other approach to do the same?

Why the Switch inside the Container? You can add the Container inside the Switch and only components that you want will be inside the Container. — Abdulmuhaymin, Sep 27 '21 at 05:07

score 1 · Accepted Answer · answered Sep 27 '21 at 05:06

But if I put the Admin component outside the container then <Switch> thinks it's not a valid URL and the Both Admin + <Error404 /> components loads simultaneously.

This is because the Router component inclusively (i.e. all matches) matches and renders routes while the Switch exclusively (i.e. only one match) matches and renders them. Since both the "/admin" Route and Switch are both rendered by the Router then they both can potentially match.

You can use more than one Switch in your router. Render an "outer" switch to match and render either the "/admin" route, or everything else, and use the "inner" switch as-is. Now the 404 route is rendered on the "other" route in the inner switch.

function App() {
  return (
    <Router>
      <Header />
      <main className="py-1">
      <Switch>
        <Route path="/admin" component={Admin} />
        <Route>
          <Container>
            <Switch>
              <Route path="/" component={HomeScreen} exact />
              <Route path="/login" component={LoginScreen} exact />
              <Route path="/sitemap" component={SiteMap} exact />
              {/* SOME MORE ROUTES LIKE THESE .... */}
              <Route path="*">
                <Error404 />
              </Route>
            </Switch>
          </Container>
        </Route>
      </Switch>
      </main>
      <Footer />
    </Router>
  );
}

How can I exempt some routes to not hit 404 error if the URL don't match as exact?

1 Answers1