Я знаю, что эта проблема связана с фундаментальным неправильным пониманием того, как работает React Router, и, более конкретно, вероятно, с объектом истории. У меня есть компонент под названием Поиск, который позволяет пользователю искать определенный город. Этот компонент появляется в разных местах приложения, включая «/» и «/:cityname».
Из «/», компонент работает, как и ожидалось, и корректно выдвигает новый параметр url на URL иURL становится '/ Ванкувер'. Тем не менее, из '/ Ванкувер', когда я использую этот же компонент, URL-адрес не работает, как ожидалось. Например, если я вхожу в Стамбул, меня правильно направляют в / istanbul, но затем, когда я прохожу приложение и нажимаю на элементы, я ожидаю, что меня направят в '/ istanbul / item1'. Однако в настоящее время происходит то, что я оказываюсь в '/ istanbul / istanbul / item1', который, конечно, не найден, и возвращает 404.
Вот функция, которая вызывается при выборе города(находится в компоненте поиска)
const onSuggestionSelected = (event, { suggestion }) => {
props.history.push(`/${suggestion.nickname}`)
}
App.js с маршрутами
<Switch>
<Route exact path="/" component={HomePage} />
<Route exact path="/terms-of-service" component={TermsOfServicePage} />
<Route exact path="/privacy-policy" component={PrivacyPolicyPage} />
<Route exact path="/:cityname/personalize" component={FilterPage} />
<Route exact path="/:cityname/experiences" component={SearchPage}>
<Redirect to="/:cityname" />
</Route>
<Route exact path="/:cityname" component={SearchPage} />
<Route exact path="/:cityname/experiences/:experiencename" component={ExperiencePage} />
<Route exact path="/:cityname/experiences/:experiencename/summary" component={(routeProps) => <SummaryPage {...routeProps} />} />
<Route exact path="/:cityname/experiences/:experiencename/payment" component={PaymentPage} />
<Route exact path="/:cityname/experiences/:experiencename/payment-successful" component={PaymentSuccessfulPage} />
<Route component={NotFoundPage} />
<GlobalStyle />
</Switch>
Кнопка ExploreMore
<ButtonWrapper onClick={sendAnalyticsData}>
<LetsGoButton to={{
pathname: `${props.match.params.cityname}/experiences/${experience.nickname}`,
state: props.location.state
}}
palette="tertiary">
Explore more
</LetsGoButton>
</ButtonWrapper>
Пожалуйста, дайте мне знать, если есть что-то еще, чтоЯ могу представить, что было бы полезно. Я пытался исследовать, как работает history.push, но мне не удалось найти много. Я предпочитаю, что он берет текущее местоположение и добавляет указанный URL. Даже если это так, я не могу понять, почему он будет применять Стамбул дважды.
