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
    – Demon __
    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} />.Спасибо
    – Demon __
    29 июл 2019 в 19:49

Ваш ответ

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

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