如何修复 React Router 正则表达式路径中的“SyntaxError：无效正则表达式”答案

【问题标题】：How to fix 'SyntaxError: invalid regular expression' in React Router regex path如何修复 React Router 正则表达式路径中的“SyntaxError：无效正则表达式”
【发布时间】：2019-06-26 12:50:23
【问题描述】：

我正在使用 react-router 在 ReactJS 中构建一个单页 React 应用程序，并且希望仅在 root (path="/") 中显示某个组件。为此，我尝试在 Route 路径中使用正则表达式。但是，这要么引发 SyntaxError，要么根本不起作用。

我设法在 www.regex101.com 上创建了两个不同的正则表达式来执行我希望它执行的操作。但是，当我将它们放入我的 React 代码时，它们就不起作用了。

我以 Stack Overflow 为例：react-router render menu when path does not match 并查看了许多其他人试图解决问题，但我无法弄清楚出了什么问题以及如何解决它。

我尝试的第一个选项是：

<Router>
   <Route path="(?![\/]$).+" component={BackBtn} />
</Router>

这会引发以下错误：

SyntaxError：无效的正则表达式：/^((?:?\![\\/]\$))\.\+(?:\/(?=$))?(?=\/|$)/：无需重复

我尝试的另一个选项是：

<Router>
   <Route path="[\/]+[a-z]+" component={BackBtn} />
</Router>

这不会引发错误，但当我不在根页面上时也不会显示我的 BackBtn 组件（例如 path="/project"）

我期望它做的是在路径为“/”时隐藏 BackBtn 组件，但在路径为例如“/project”或“/about”或“/contact”时显示组件。每当用户点击 BackBtn 组件时，用户就会被重定向回 root，因此 BackBtn 组件应该再次被隐藏。

所以：
应该匹配：
/项目
/关于
/联系方式
不应该匹配：
/

如何更改我的正则表达式，使其在路径为“/”时隐藏 BackBtn 组件，但显示所有其他路径的组件？

【问题讨论】：

标签： regex reactjs react-router

【解决方案1】：

查看React Router docs，它看起来不像path 属性接受正则表达式。关于您链接到的问题的已接受答案的 cmets 似乎也支持这一点。如果您唯一的路由是 /project、/about 和 /contact，看起来您可以在 path 中使用一组路由，如下所示：

<Route path={['/project', '/about', '/contact']} component={BackBtn} />.

否则，您可以尝试使用 React Router Switch component 并使用 Route 组件来查找 / 路径并在其上不呈现任何内容，然后使用另一个默认 Route 来呈现所有其他路由上的后退按钮。像这样的：

<Switch>
  <Route exact path="/" component={null} />
  <Route component={BackButton} />
</Switch>

【讨论】：