404路由始终与多个BrowserRouter一起显示

2024-05-14 • 问答

我已经为单独的基本名称创建了多个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>

最后一个组件始终显示所有路线，因为每个模块都有一个单独的基本名称，所以我无法创建一个浏览器路线

检查此文件没有找到与此相关的任何官方文档，所以问题是因为每个BrowserRouter是一个不同的文件，所以当我们在上一个BrowserRouter中定义为404时，它将最终通过每个文件执行，并且也会对每个文件执行一。

因此，我们需要使用渲染进行检查，我们可以使用预定义的路由路径名进行检查，选中此

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;

在底部定义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路由。

404路由始终与多个BrowserRouter一起显示

wensu521 回答：404路由始终与多个BrowserRouter一起显示

大家都在问