0

Приложения работает на react-router.(localhost:3000/)

Недавно заметил что если написать такой путь localhost:3000//приложение загрузит компонент header без ничего также если добавить еще один слеш и еще без остановки то есть при таком url localhost:3000/////////// будет тот же результат что написано наверху.

Я написал небольшое регулярное выражение для того чтобы решить данную задачу /\/\//g, "/".

Попытка первая функция cleanPath

cleanPath = (path) => {
   return path.replace(/\/\//g, "/");
}
<Route path={this.cleanPath}  component={Test}/>

Но такой подход не сработал.

Потом я хотель использовать history

 <Route path="/" exact  render={({match,location,history}) => {

   if(match == "//"){
      history.push("/")
   }
 return <Test />}}/>

Это я написал для теста узнать вообще сработает ли такой код.Тоже не сработал.

И я заметил что это проблема роутера не только у меня.Также это проблема есть у таких сайтов (написанные на реакт) как marvel.com , airbnb.ru.

Помогите пожалуйста.

3
  • Не стоит равняться на marvel и airbnb их фрилансеры в свободное от работы время делают 24 июл 2019 в 7:44
  • @Demon __ ANT ReactRouter, если на находит совпадение, отправляет запрос на сервер. Есть вероятность, что header каким-либо образом подтягивается с сервера просто? Какой код js в браузере лежит?
    – Arantler
    25 июл 2019 в 15:06
  • @Arantler нет.Проста возмите любой код роутера и сделайте так чтобы если user ввел два или больше слешей то перенаправил на основную страницу .Вот к примеру если на этой странице вводить два слеша то он покажет только список ссылок а мне надо чтобы показало основную страницу codesandbox.io/s/vVoQVk78
    – Randall
    25 июл 2019 в 17:14

1 ответ 1

1
+50

В офф документации есть пример, и там все работает как надо: https://reacttraining.com/react-router/web/example/no-match

<Route path="/" exact component={Home} />
          <Redirect from="/old-match" to="/will-match" />
          <Route path="/will-match" component={WillMatch} />
          <Route component={NoMatch} />
1
  • действительно рабочий код.А все было так банально надо было проста добавить <Route component={NoMatch} />.Спасибо
    – Randall
    29 июл 2019 в 19:49

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.