Question

我正在使用react-router在ReactJS中构建一个单页React应用，并且只想在根目录中显示某个组件（path =“ /”）。为此，我尝试在Route路径中使用regex。但是，这将引发SyntaxError或只是行不通。

我设法在www.regex101.com上创建了两个我想要的正则表达式。但是，当我将它们放入我的React代码时，它们不起作用。

我以这个堆栈溢出为例：react-router render menu when path does not match 并查看了许多其他尝试解决问题的方法，但我无法弄清楚出了什么问题以及如何解决。

我尝试的第一个选项是：

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

这将引发以下错误：

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

我尝试的另一个选项是：

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

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

我希望它做的是在路径为'/'时隐藏BackBtn组件，而在路径为'/ project'或'/ about'或'/ contact'时显示SHOW组件。每当用户单击BackBtn组件时，该用户就会被重定向回root用户，因此应该再次隐藏BackBtn组件。

所以：
应该匹配：
/ project
/ about
/ contact
不应该匹配：
/

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

Answer 1

看着React Router docs，它看起来不像path道具接受正则表达式。关于您链接到的问题的已接受答案的评论似乎也支持该观点。如果您仅有的路线是/ 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>

如何在React Router正则表达式路径中修复'SyntaxError：Invalid Regular Expression'

1 个答案: