如何在 react-router-dom v6 中排除某些路径？

【问题标题】：how to exclude certain path in react-router-dom v6?如何在 react-router-dom v6 中排除某些路径？
【发布时间】：2022-11-07 16:11:50
【问题描述】：

例如在 v5 中我可以这样做：

<Route
  path={/^(?!.*ava\/search).*$/}
  element={<AvaHeader />}
/>

但它在 v6 中不起作用

【问题讨论】：

react-router-dom@6 路由不使用正则表达式，并且总是完全匹配，所以我想你可以不是为您不想匹配的路径渲染路径并在其上渲染内容。如果它不像这样微不足道，您能否澄清您想要的行为到底是什么？
是的，我知道 react-router-dom@v6 不支持正则表达式。谢谢你的评论。

标签： javascript reactjs react-router-dom

【解决方案1】：

因此，根据我对您的问题的理解，您希望在路由路径时有条件地渲染此 AvaHeader 组件没有包含带有"*ava/search" 段对的任何路径。我建议创建一个包装组件来读取整个路径并应用正则表达式。

例子：

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

const pathRegex = /^(?!.*ava/search).*$/;

const AvaHeaderWrapper = ({ children }) => {
  const { pathname } = useLocation();

  const isValid = pathRegex.test(pathname);
  
  return isValid ? children : null;
};

渲染AvaHeader (通过包装组件) 在自己的路线上，path="*" 在自己的Routes 组件中。

<Routes>
  <Route
    path="*"
    element={
      <AvaHeaderWrapper>
        <AvaHeader />
      </AvaHeaderWrapper>
    }
  />
</Routes>

演示

【讨论】：