如何在另一个路由器内部制作反应路由器？

Question

我正在使用 react-router 开发一个项目。

这是一个项目结构

main
   - mainRouter.tsx

   - programFolder
     - ProgramMainComponent.tsx
     - ProgramScheduleComponent.tsx
     - ProgramDetailComponent.tsx
     - programRouter.tsx

   - serviceFolder
     - ServiceMainComponent.tsx
     - ServiceFAQComponent.tsx
     - ServiceCustomerComponent.tsx
     - serviceRouter.tsx

这就是我制作 programRouter.tsx 和 serviceRouter.tsx 的方式

// programRouter.tsx

const ProgramRouter = () => {
  return (
    <BrowserRouter>
      <Switch>
          <Route path={'/program'} exact={true} component={ProgramMainComponent} />
          <Route path={'/program/schedule'}  exact={true} component={ProgramScheduleComponent} />
          <Route path={'/program/detail'}  exact={true} component={ProgramDetailComponent} /
      </Switch>
    </BrowserRouter>
  )
}

// serviceRouter.tsx

const ServiceRouter = () => {
  return (
    <BrowserRouter>
      <Switch>
          <Route path={'/service'} exact={true} component={ServiceMainComponent} />
          <Route path={'/service/faq'}  exact={true} component={ServiceFAQComponent} />
          <Route path={'/program/customer'}  exact={true} component={ServiceCustomerComponent} />
      </Switch>
    </BrowserRouter>
  )
}

这是我想要做的。

当我添加更多页面时，我希望每个文件夹都包含自己的 router.tsx 文件，并将这些文件导入 mainRouter.tsx 文件中，如下例所示。

import * as React from 'react';
import { BrowserRouter, Route, Switch } from 'react-router-dom';
import { programRouter } from 'main/program';
import { serviceRouter } from 'main/service';

const Router = () => {
  return (
    <BrowserRouter>
      <Switch>
          <Route path='/' exact={true} component={MainComponent} />
          <Route path={'/program'} exact={true} component={programRouter} />
          <Route path={'/service'} exact={true} component={serviceRouter} />
      </Switch>
    </BrowserRouter>
  )
}

有没有办法可以在 mainRouter.tsx 中使用每个路由器组件？

Answer 1

React Router 文档中有一个嵌套组件和路由的示例。 基本上，您不需要在根级别多次使用BrowserRouter 。 您还应该删除根组件中路由的exact={true}道具，以确保它们的子路由可以正确呈现。

import * as React from 'react';
import { BrowserRouter, Route, Switch } from 'react-router-dom';
import { programRouter } from 'main/program';
import { serviceRouter } from 'main/service';

const Router = () => {
  return (
    <BrowserRouter>
      <Switch>
          <Route path='/' exact component={MainComponent} />
          <Route path={'/program'} component={programRouter} />
          <Route path={'/service'} component={serviceRouter} />
      </Switch>
    </BrowserRouter>
  )
}