reactjs - Page not found is displayed on all my pages - React Router

Question

I have all my routing and as a good practice, i also have my NotFound page, i added this inside my MainLayout, that contains a Navbar and a Footer. But i have a problem, my NotFound page is being displayed with the pages of the other routes.

const Root = () => 
  <BrowserRouter>
  <Switch>
     <ProtectedRoute exact path="/:username/contact-networks" component={ContactNetworks} /> 
     <ProtectedRoute exact path="/:username/tags" component={UserTags} />
     <ProtectedRoute exact path="/:username/profile-picture" component={UserProfilePicture} />
     <MainLayout nofooter={['/login']}>
        <Route exact path="/" component={Home} />
        {!isAuthenticated ? (
           <Fragment>
              <Route exact path="/logup" component={Logup} /> 
              <Route exact path="/login" component={Login} />
           </Fragment>) : <Redirect to="/" />}
        <Route exact path="/users/:username" component={UserProfile} />
        <Route exact path="/:username/catalog/:product" component={ProductPage} />
        <ProtectedRoute exact path="/:username/products/new" component={PostProduct} />
        <Route exact path="/:username/opinions" component={ClientsOpinions} /> 
        <ProtectedRoute exact path="/:username/opinions/new" component={NewOpinion} /> 
        <Route exact path="/:shop/contact" component={ShopContact} />
        <Route exact path="/search/results" component={SearchResults} />
        <Route component={NotFound} />
     </MainLayout>
  </Switch>
  </BrowserRouter >

This happens:

question from:https://stackoverflow.com/questions/65927044/page-not-found-is-displayed-on-all-my-pages-react-router

Answer 1

All Route components need to be a direct child of a Switch in order to work properly. Per the docs:

<Switch> is unique in that it renders a route exclusively. In contrast, every <Route> that matches the location renders inclusively.

What's happening here is that you have MainLayout interrupting the parent/child relationship between your Switch and your Route components. Therefore the Routes resort to their default behavior which is to render all Routes that match the path instead of just the first.

You need to introduce an additional Switch component inside of MainLayout so that the Routes have a Switch as their parent. Additionally, you should replace the Fragment inside of the isAuthenticated branch with a Switch.

const Root = () => 
<BrowserRouter>
  <Switch>
    <ProtectedRoute exact path="/:username/contact-networks" component={ContactNetworks} /> 
    <ProtectedRoute exact path="/:username/tags" component={UserTags} />
    <ProtectedRoute exact path="/:username/profile-picture" component={UserProfilePicture} />
    <MainLayout nofooter={['/login']}>
      <Switch>
        <Route exact path="/" component={Home} />
        {!isAuthenticated ? (
            <Switch>
              <Route exact path="/logup" component={Logup} /> 
              <Route exact path="/login" component={Login} />
            </Switch>) : <Redirect to="/" />}
        <Route exact path="/users/:username" component={UserProfile} />
        <Route exact path="/:username/catalog/:product" component={ProductPage} />
        <ProtectedRoute exact path="/:username/products/new" component={PostProduct} />
        <Route exact path="/:username/opinions" component={ClientsOpinions} /> 
        <ProtectedRoute exact path="/:username/opinions/new" component={NewOpinion} /> 
        <Route exact path="/:shop/contact" component={ShopContact} />
        <Route exact path="/search/results" component={SearchResults} />
        <Route component={NotFound} />
      </Switch>
    </MainLayout>
  </Switch>
</BrowserRouter >