React Router path属性用正则实现指定路由不渲染MainLayout方案咨询

方法1：使用<Switch>组件匹配唯一路由（最推荐） #

react-router默认会渲染所有路径匹配的路由组件，你遇到的同时渲染两个组件的问题，是因为/login、/logout路径同时符合对应精准路由和后面的通配路由规则。
你只需要把所有路由放在<Switch>组件内部，并且保证精准度更高的/login、/logout路由放在通配路由前面，<Switch>会匹配第一个符合规则的路由，匹配成功后就不会继续往下匹配：

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

// 路由配置部分
<Switch>
  <Route exact path="/logout" component={Logout} />
  <Route exact path="/login" component={Login} />
  <Route
    exact
    path="/:subdirectory?/:nested?/:id?/"
    component={MainLayout}
  />
</Switch>

这个方案改造成本最低，也符合react-router的设计规范。

方法2：路径参数加正则排除指定值 #

如果你确实不想用Switch，可以给第一个路径参数加正则规则，排除值为login、logout的情况，react-router支持在路径参数的括号内写入正则规则，匹配成功才会渲染组件：

<Route
  exact
  path="/:subdirectory(?!login|logout)[^/]*/?/:nested?/:id?/"
  component={MainLayout}
/>

这里的(?!login|logout)是正则的负向预查规则，代表第一个路径段不能是login或logout，就不会匹配/login、/logout路径，自然不会渲染MainLayout。

方法3：MainLayout内部做路径判断 #

如果你的路由结构有特殊限制，也可以直接在MainLayout组件内部判断当前路径，符合排除规则的话就不渲染导航（或者直接返回null）：

import { useLocation } from 'react-router-dom';

function MainLayout() {
  const location = useLocation();
  // 不需要展示导航的路径列表
  const excludePaths = ['/login', '/logout'];
  if (excludePaths.includes(location.pathname)) {
    return null; // 也可以选择只返回页面内容、不渲染导航组件
  }

  return (
    <div>
      {/* 你的导航组件 */}
      <Navigation />
      {/* 页面主体内容 */}
      <div className="main-content">
        {/* 子路由渲染逻辑 */}
      </div>
    </div>
  )
}

这个方案灵活性最高，后续如果要新增其他不需要展示导航的路径，直接往excludePaths数组里添加即可。

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