Typescript 通配符路径与每条路径一起显示

我有两个Reaction模块AppA和AppB，在一个Reaction应用程序下.它们都有单独的路由文件，我在其中定义了特定于每个模块的各自的路由.在主Reaction项目下，我有一个路由文件，它组合了来自两个模块的路由.

appA-routing.tsx:

// All the require imports.

const AppARouting: FC = () => {
    /// TSX:
    return (
        <Routes>
            <Route path={"/appA"} element={<AppA_Layout />}>
                <Route path={Paths.appA_HOME} element={<AppA_Home />} >
                    <Route path={Paths.appA_DASHBOARD} element={<AppA_Dashboard />} />
                    <Route path={Paths.REQUESTS} element={<Requests />} />
                </Route>
        </Routes>
    );
};

AppA_Routing.displayName = "AppA_Routing";

export default AppA_Routing;

appB-routing.tsx:

// All the require imports.

const AppBRouting: FC = () => {
    /// TSX:
    return (
        <Routes>
            <Route path={"/appB"} element={<AppB_Layout />}>
                <Route path={Paths.appB_HOME} element={<appB_Home />} >
                    <Route path={Paths.appB_DASHBOARD} element={<AppB_Dashboard />} />
                    <Route path={Paths.APPROVALS} element={<Approvals />} />
                </Route>
        </Routes>
    );
};

AppB_Routing.displayName = "AppB_Routing";

export default AppB_Routing;

routing.tsx个

// All the require imports.

const Routing: FC = () => {
    /// TSX:
    return (
        <BrowserRouter basename={Paths.BASE}>
            <Routes>
                <Route path="/" element={<MainLayout />}>
                    <Route path="/" element={<MainHome />} />
                </Route>
            </Routes>

            <AppA_Routing />
            <AppB_Routing />

            <Routes>
                <Route path={Paths.SignOut} element={<SignOut />}/>
                <Route path={Paths.PAGE_NOT_FOUND} element={<UnknownRoute />} />
                <Route path="*" element={<UnknownRoute />} />
            </Routes>
        </BrowserRouter>
    );
};

Routing.displayName = "Routing";

export default Routing;

文件夹 struct 如下所示:

MainApp/
  |-src/
     |-common-components/
     |-modules/
     |  |-appA/
     |  |  |-appA-components/
     |  |  |-appA-routing.tsx
     |  |-appB/
     |     |-appB-components/
     |     |-appB-routing.tsx
     |-routing.tsx

我面临着一个奇怪的问题，当我导航到任何特定的路由时，它正在加载它各自的组件，但同时它下面还加载了通配符路由，也就是UnknownRoute个组件.

例如，如果我在/appA/home路由中，则渲染如下:

<AppA_Home />
<UnknownRoute /> <!-- The expected is, this component should not be loaded. -->

如果我在/appB/home路，它是渲染如下:

<AppB_Home />
<UnknownRoute /> <!-- The expected is, this component should not be loaded. -->