Как исправить 'SyntaxError: недопустимое регулярное выражение' в пути регулярного выражения React Router

Question

Я создаю одностраничное приложение React в ReactJS с использованиемact-router и хочу показывать определенный компонент только в режиме root (путь = "/").Для этого я пытаюсь использовать регулярные выражения в пути маршрута.Однако, это либо выдает SyntaxError, либо просто не работает.

Мне удалось создать два разных регулярных выражения, которые делают то, что я хочу, на www.regex101.com.Они не работают, когда я помещаю их в свой код React.

Я использовал этот переполнение стека в качестве примера: меню рендеринга реакции-маршрутизатора, когда путь не совпадает с , и посмотрел на многиедругие пытаются решить проблему, но я не могу понять, что идет не так и как это исправить.

Первый вариант, который я попробовал:

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

Это приводит к следующей ошибке:

SyntaxError: Неверное регулярное выражение: /^((?:?\![\\/]\$))\.\+(?:\/(?=$))?(?=\/|$)/: Ничего не повторяется

Другой вариант, который я пробовал:

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

Это нене выдает ошибку, но также не показывает мой компонент BackBtn, когда я не на корневой странице (например, path = "/ project")

То, что я ожидаю, это скрытьКомпонент BackBtn, когда путь - «/», но ПОКАЗАТЬ компонент, когда путь, например, «/ project» или «/ about» или «/ contact».Всякий раз, когда пользователь щелкает компонент BackBtn, он перенаправляется обратно в корневой каталог, и поэтому компонент BackBtn должен быть снова скрыт.Так:ДОЛЖЕН СОВПАДАТЬ:/ проект/около/ контактНЕ ДОЛЖЕН СОВПАДАТЬ:/

Как я могу изменить свое регулярное выражение, чтобы оно скрывало компонент BackBtn, когда путь был '/', но отображало компонент для всех других путей?

Answer 1

Глядя на документы React Router , не похоже, что path prop принимает регулярные выражения.Комментарии к принятому ответу на вопрос, который вы связали, похоже, подтверждают это.Если ваши единственные маршруты - / project, / about и / contact, похоже, вы можете использовать массив маршрутов в path, например:

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

В противном случаеВы можете попробовать использовать компонент React Router Switch и иметь компонент Route, который ищет путь / и ничего не отображает на нем, а затем другой маршрут по умолчанию, который отображает кнопку возврата на всех других маршрутах.Как то так:

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