Reactjs 404路由始终使用多浏览器路由器显示

我已经为单独的basename创建了多个BrowserRouter，但当我尝试实现404路由时，它将显示在每个路由组件的下面

    <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>

---

最后一个组件总是与所有路由一起显示，我无法创建一个browserroute，因为我为每个模块都有一个单独的基本名称

在底部定义404路由

          <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>

---

不要单独定义404路由。

检查此路由。没有找到任何与此相关的正式文档，所以问题是因为每个BrowserRouter都是不同的，所以当我们在最后一个BrowserRouter中定义为404时，它将通过每个路由器执行，它也将与每个路由器一起执行

所以我们需要使用render进行检查，我们可以使用预定义的路由路径名进行检查，检查这个

从“React”导入React；
从“react router dom”导入{BrowserRouter，Route，Switch}；
常量路径名=['/test'、'/test/'、'/test/inbox'、'/test/inbox/'、'/test/settings'、'/test/settings/'，
“/sample/”、“/sample/”、“/sample/inbox/”、“/sample/inbox/”、“/sample/settings/”、“/sample/settings/”
]
const收件箱=（）=>收件箱组件；
常量设置=（）=>设置；
const NotFound=（道具）=>{
如果（！pathNames.includes（props.location.pathname））
返回(
找不到
)
其他的
返回null；
}
常量HomePageTest=（）=>主页测试
常量HomePageSample=（）=>主页示例
函数App（）{
返回(
} />
);
}
导出默认应用程序这将捕获未定义路径的组件。但如果你不给，它也会起作用，我在最新版本中试用过。我不明白为什么会有多个浏览器路由器。你能不能再深入解释一下你想解决的问题，这样对我的工作会有帮助answer@Dilip每个部分我都有单独的模块，每个模块都需要单独的url，如“项目/详细信息、项目/列表、销售/详细信息、，“销售/列表”，因此我创建了多个浏览器路由器。我在最后一个url的底部添加了404路由，但它也不起作用。请尝试在每个url之间使用404路由，并让我知道它对您起作用了吗？还是一样的问题我认为这是因为使用了多个BrowserRouter，正如你所说的，它的不同模块我需要进一步研究，因为这是我第一次看到basename。让我检查一下，它会更新的。我已经做了，但它仍然显示所有route@BahadurSinghDeol你能解释一下为什么你定义了两个浏览器路由器而不是一个吗。因为您的所有路由都可以在browserRouter的单个swtch中工作。我为每个部分都有单独的模块，我们需要为每个模块提供单独的url，如“项目/详细信息、项目/列表、销售/详细信息、销售/列表”，所以我创建了多个浏览器路由器。我在最后一个url的底部添加了404路由，但它也不是working@BahadurSinghDeol你能在沙盒中分享你的代码吗？这样我就可以检查了。检查这个url，我只添加了两个文件App.js和Approuting.js。它只是编码不在工作状态，以便您可以识别问题