react-router-dom@5中添加子路由且不渲染父路由/tab内容的方法

核心思路 #

在react-router-dom@5中，利用Switch组件只渲染第一个匹配到的路由的特性，将更具体的子路由放在父路由前面，就能实现访问子路由时不渲染父路由组件的效果。

修改后的路由配置 #

首先确保导入Switch组件：

import { Router, Route, Redirect, Switch } from 'react-router-dom';

然后调整路由结构：

<Router>
  <Route exact path="/">
    <Redirect to="/tab" />
  </Route>
  {loading ? (
    <Loader style={{ margin: 100 }} />
  ) : (
    <>
      <Route exact path="/privacy" component={Privacy} />
      <Route exact path="/termsofuse" component={TermsOfUse} />
      <Route exact path="/config" component={TabConfig} />
      {/* 用Switch包裹tab相关路由，确保仅渲染第一个匹配项 */}
      <Switch>
        <Route exact path="/tab/organizer" component={Organizer} />
        <Route exact path="/tab/candidate" component={Candidate} />
        <Route exact path="/tab" component={Tab} />
      </Switch>
    </>
  )}
</Router>

关键说明 #

• Switch组件会按顺序遍历子路由，一旦找到匹配当前URL的路由就停止匹配并渲染该组件。
• 将/tab/organizer、/tab/candidate这类更具体的路由放在/tab路由前面，访问子路由时会优先匹配到它们，不会再触发/tab路由的渲染。
• 保留exact属性确保路由是精确匹配，避免出现非预期的路由匹配情况。

内容的提问来源于stack exchange，提问作者Hamza Haddad