如何在react-router-dom v6中配置路由排除特定路径？

React Router v6 移除了path属性对正则表达式的支持，所有路由路径仅支持官方约定的字符串语法（动态参数:param、通配符*等），因此v5版本中正则排除路径的写法无法直接在v6中生效。
针对「排除/ava/search路径、其余路径都渲染<AvaHeader />」的需求，最简便的实现方式是结合路由钩子做条件渲染，灵活度也比原正则写法更高。

方案1：useLocation + 条件渲染（推荐，适合全局布局组件） #

直接在根布局/公共布局组件中获取当前路径，判断命中排除规则时隐藏组件即可，支持任意复杂的匹配逻辑：

import { useLocation, Routes, Route } from 'react-router-dom'
import AvaHeader from './components/AvaHeader'
// 其他页面组件引入省略

function App() {
  const location = useLocation()

  // 匹配规则：路径包含ava/search时不渲染Header，和原v5正则效果完全一致
  const shouldRenderHeader = !/ava\/search/.test(location.pathname)

  // 如果需要精确匹配/前缀匹配多个排除路径，可以替换为下面的写法
  // const excludePathPrefixes = ['/ava/search', '/login', '/404']
  // const shouldRenderHeader = !excludePathPrefixes.some(path => location.pathname.startsWith(path))

  return (
    <div className="app-container">
      {shouldRenderHeader && <AvaHeader />}
      {/* 正常配置所有路由即可 */}
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/ava/search" element={<AvaSearch />} />
        <Route path="*" element={<NotFound />} />
      </Routes>
    </div>
  )
}

export default App

方案2：路由配置层面实现（适合路由级组件渲染） #

如果不想在布局中写条件判断，可以通过嵌套路由+通配符拆分路由范围，但灵活度较低：

import { Routes, Route, Outlet } from 'react-router-dom'
import AvaHeader from './components/AvaHeader'

function LayoutWithHeader() {
  return (
    <div>
      <AvaHeader />
      {/* 匹配所有非排除路径的子路由出口 */}
      <Outlet />
    </div>
  )
}

function App() {
  return (
    <Routes>
      {/* 单独渲染排除的路径，不带Header */}
      <Route path="/ava/search" element={<AvaSearch />} />
      {/* 其余所有路径走带Header的布局 */}
      <Route path="*" element={<LayoutWithHeader />}>
        {/* 在这里嵌套其余所有业务路由 */}
        <Route index element={<Home />} />
        <Route path="/other-page" element={<OtherPage />} />
      </Route>
    </Routes>
  )
}

注意事项 #

• 不要尝试给v6的Route.path属性传入正则对象，v6内部会将path作为字符串解析，传入非字符串值会导致匹配完全失效。
• 复杂路径匹配逻辑直接写在JS判断中即可，支持多路径、模糊匹配、正则匹配等任意规则，比v5的path内正则更易维护。

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