404 route always display with multiple BrowserRouter

Question

I had created multiple BrowserRouter for separate basename but when I am trying implement 404 route it will be displayed below of each route component

    <BrowserRouter basename={Modules.inbox}>

    <div className="AppRouting">
        <Switch>
            <SecretRoute exact path={CommunicationRoute.inbox} component={CommunicationRouting} />
            <SecretRoute exact path={CommunicationRoute.inbox + '/:slug'} component={CommunicationRouting} />
            <SecretRoute exact path={CommunicationRoute.settings} component={CommunicationRouting} />
            <SecretRoute exact path={CommunicationRoute.sending} component={CommunicationRouting} />
            <SecretRoute exact path={CommunicationRoute.trash} component={CommunicationRouting} />
            <SecretRoute exact path={CommunicationRoute.storage} component={CommunicationRouting} />
            <SecretRoute exact path={CommunicationRoute.blockWords} component={CommunicationRouting} />
            <SecretRoute exact path={CommunicationRoute.signature} component={CommunicationRouting} />
            <SecretRoute exact path={CommunicationRoute.defaultContent} component={CommunicationRouting} />
            <SecretRoute exact path={CommunicationRoute.rejectedMail} component={CommunicationRouting} />
            <SecretRoute exact path={CommunicationRoute.routingRules} component={CommunicationRouting} />

        </Switch>
    </div>
</BrowserRouter>

    <BrowserRouter basename={Modules.project} history={history} >

    <div className="AppRouting">
        <Switch>

            <SecretRoute exact path='/' component={Timesheet} />
            <SecretRoute exact path='/fill-timesheet' component={Timesheet} />
            <SecretRoute exact path="/(new-timesheet|serverError|open-task|thank-you|network-error)/" component={Timesheet} />
            <BlockTimesheetRoute exact path='/block-fill-timesheet' component={Mtimesheet} />
            <BlockTimesheetRoute exact path="/(block-timesheet|serverError|block-open-task|mthankyou|network-error)/" component={Mtimesheet} />
            <SecretRoute exact path="/project-detail" component={ProjectList} />
            <SecretRoute exact path="/my-timesheet" component={Timesheet} />
            <SecretRoute exact path='/calender' component={Dashboardcalendar} />
            <SecretRoute exact path='/review-timesheet' component={ReviewApprove} />
            <SecretRoute exact path='/review-timesheets' component={ReviewApprove} />
            <SecretRoute exact path='/timesheets-view' component={ReviewApprove} />

        </Switch>
    </div>
</BrowserRouter>

<BrowserRouter>
<Switch>
    <Route component={NotFound} />
</Switch>

The last component always display with all route, I can't create one browserroute because I had a separate base name for each module

Answer 1

Check this one didnt find any official docs related to this, so the problem was because each BrowserRouter is a different one, so it will execute through each at last when we define in the last BrowserRouter as 404 also it will execute with each one.

So somehow we need to have check using render we can check with the predefined routes pathnames, check this one

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

const pathNames = ['/test', '/test/', '/test/inbox', '/test/inbox/', '/test/settings', '/test/settings/',
  '/sample', '/sample/', '/sample/inbox', '/sample/inbox/', '/sample/settings', '/sample/settings/'
]


const Inbox = () => <div>Inbox Component</div>;

const Settings = () => <div>Settings</div>;

const NotFound = (props) => {
  if (!pathNames.includes(props.location.pathname))
    return (
      <div>Not Found</div>
    )
  else
    return null;
}

const HomePageTest = () => <div>Home Page Test</div>

const HomePageSample = () => <div>Home Page Sample</div>



function App() {
  return (
    <>

      <BrowserRouter basename='/test'>
        <Switch>
          <Route exact path='/' component={HomePageTest} />
          <Route exact path="/inbox" component={Inbox} />
          <Route exact path="/settings" component={Settings} />
        </Switch>
      </BrowserRouter>
      <BrowserRouter basename="/sample">
        <Switch>
          <Route exact path='/' component={HomePageSample} />
          <Route exact path="/inbox" component={Inbox} />
          <Route exact path="/settings" component={Settings} />
        </Switch>
      </BrowserRouter>
      <BrowserRouter>
        <Switch>
          <Route path='*' render={(props) => <NotFound {...props} />} />
        </Switch>
      </BrowserRouter>
    </>
  );
}

export default App;

Answer 2

Define 404 route in bottom.

          <Switch>

            <SecretRoute exact path='/' component={Timesheet} />
            <SecretRoute exact path='/fill-timesheet' component={Timesheet} />
            <SecretRoute exact path="/(new-timesheet|serverError|open-task|thank-you|network-error)/" component={Timesheet} />
            <BlockTimesheetRoute exact path='/block-fill-timesheet' component={Mtimesheet} />
            <BlockTimesheetRoute exact path="/(block-timesheet|serverError|block-open-task|mthankyou|network-error)/" component={Mtimesheet} />
            <SecretRoute exact path="/project-detail" component={ProjectList} />
            <SecretRoute exact path="/my-timesheet" component={Timesheet} />
            <SecretRoute exact path='/calender' component={Dashboardcalendar} />
            <SecretRoute exact path='/review-timesheet' component={ReviewApprove} />
            <SecretRoute exact path='/review-timesheets' component={ReviewApprove} />
            <SecretRoute exact path='/timesheets-view' component={ReviewApprove} />
            <Route component={NotFound} />

        </Switch>

Don't define 404 route seperately.