React中Wildcard路由随所有路由一同渲染的问题

问题原因 #

你遇到的问题根源是主路由文件中使用了多个独立的<Routes>组件。React Router里，每个<Routes>都会单独对当前URL进行匹配，只要URL符合该组件内的路由规则，就会渲染对应组件。当你访问/appA/home这类路由时，第三个<Routes>里的通配符*会匹配所有URL，导致UnknownRoute和目标组件同时被渲染。

解决方案 #

把所有路由整合到同一个<Routes>组件中，让React Router按照顺序匹配路由，找到第一个匹配项后就停止，只有当没有任何路由匹配时才会触发通配符规则。具体修改如下：

1. 修改模块路由文件，移除外层<Routes> #

让appA-routing.tsx和appB-routing.tsx直接返回<Route>元素，而非完整的<Routes>组件：

修改后的appA-routing.tsx:

// All the require imports.

const AppARouting = () => {
    return (
        <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>
        </Route>
    );
};

AppARouting.displayName = "AppARouting";

export default AppARouting;

修改后的appB-routing.tsx:

// All the require imports.

const AppBRouting = () => {
    return (
        <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>
        </Route>
    );
};

AppBRouting.displayName = "AppBRouting";

export default AppBRouting;

2. 整合主路由文件的所有路由 #

在routing.tsx中，将所有路由（包括主模块、AppA、AppB以及兜底路由）放到同一个<Routes>组件内：

修改后的routing.tsx:

// All the require imports.

const Routing: FC = () => {
    return (
        <BrowserRouter basename={Paths.BASE}>
            <Routes>
                {/* 主模块路由 */}
                <Route path="/" element={<MainLayout />}>
                    <Route path="/" element={<MainHome />} />
                </Route>
                
                {/* 导入AppA和AppB的路由 */}
                <AppARouting />
                <AppBRouting />

                {/* 特殊路由和兜底路由 */}
                <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;

3. 检查路由路径定义（可选但重要） #

确保Paths中定义的子路由是相对路径，比如Paths.appA_HOME应该是"home"而非"/appA/home"，这样嵌套路由才能正确拼接成完整路径/appA/home。

验证 #

修改完成后，访问/appA/home、/appB/dashboard等路由时，只会渲染对应的组件；当访问未定义的路由时，才会触发UnknownRoute组件。

内容的提问来源于stack exchange，提问作者ngShravil.py