Question

我知道此问题与对React Router的工作方式（尤其是历史对象）的基本误解有关。我有一个名为“搜索”的组件，该组件使用户可以搜索特定的城市。该组件会在整个应用中的多个位置显示，包括“ /”和“ /：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}

我希望这可以帮助某人。

反应路由器重复的URL参数

1 个答案: