如何在另一个路由器内部做出反应?

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}props，以确保其子路由可以正确呈现。

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