如何修复 React 路由器正则表达式路径中的"语法错误：无效的正则表达式"

Question

我正在使用React-Router在ReactJ中构建一个单页React应用程序，并且仅在root(path ="/"(中仅显示某个组件。为此，我试图在路线路径中使用正则表达式。但是，这要么抛出语法或根本不起作用。

我设法创建了两种不同的正则表达式，可以在www.regex101.com上执行它。当我将它们放入我的React代码中时，它们不起作用。

我使用此堆栈溢出为一个例子：当路径不匹配时，React-Router渲染菜单并查看了许多其他试图解决问题的人，但我不知道出了什么问题以及如何解决问题。

我尝试的第一个选项是：

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

这引发以下错误：

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

我尝试的另一个选项是：

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

这不会引发错误，但是当我不在根页上时，也不会显示我的backbtn组件(例如，路径="/project"(

我期望的是，当路径为'/'时，请隐藏backbtn组件，但是在路径为例如'/project'或'/of'of'或'或"//contact"时显示组件。每当用户单击BackBTN组件时，将用户重定向回根，因此应将BackBTN组件再次隐藏。

因此：
应该匹配：
/项目
/关于
/联系
不应该匹配：
/

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

Answer 1

查看React路由器文档，它看起来不像path Prop接受正则表达式。关于您链接的问题的公认答案的评论似乎也支持了这一点。如果您唯一的路线是/project，/about和/contact，则看起来您可以在path中使用一系列路线，例如：

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

否则，您可以尝试使用React路由器开关组件，并具有一个查找/路径的路由组件并在其上没有任何内容，然后再呈现其他默认路由，该路由在所有其他路由上呈现后退按钮。这样的东西：

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