反应路由器重复的 URL 参数

Question

我知道这个问题与对 React Router 工作方式的根本误解有关，更具体地说，可能是历史对象。我有一个名为 Search 的组件，它允许用户搜索特定城市。该组件出现在整个应用程序的多个位置，包括“/”和“/:cityname”。

从“/”开始，组件按预期工作，并将新的 url 参数正确推送到 url 上，并且 url 变为“/vancouver”。但是，从 '/vancouver' 开始，当我使用相同的组件时，该 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>

探索更多按钮

                <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。即使是这样，我也不明白为什么要两次申请伊斯坦布尔。

Answer 1

我想出了这个问题。其中一位评论者建议我一直使用相对路径而不是绝对路径。我错误地认为他是不正确的，因为我似乎在那里有完整的网址。我的错误是没有从网址开始/

前： ${props.match.params.cityname}/experiences/${experience.nickname}

后： /${props.match.params.cityname}/experiences/${experience.nickname}

我希望这可以帮助某人。