react router duplicated URL params

Question

I know this issue has to do with a fundamental misunderstanding of how React Router works, and more specifically, probably the history object. I have a component called Search, which lets the user search for a particular city. This component appears in multiple places throughout the app, including '/' and '/:cityname'.

From '/', the component works as expected, and correctly pushes the new url param onto the url and the url becomes '/vancouver'. However, from '/vancouver', when I use this same component, the url does not behave as expected. For instance if I enter Istanbul, I am correctly directed to /istanbul, but then as I proceed through the app and click on items, I expect to be directed to '/istanbul/item1'. However, what happens currently is that I end up at '/istanbul/istanbul/item1', which of course is not found, and returns a 404.

Here is the function that gets called when a city is selected (found within Search component)

    const onSuggestionSelected = (event, { suggestion }) => {
        props.history.push(`/${suggestion.nickname}`)
    }

App.js with routes

 <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 Button

                <ButtonWrapper onClick={sendAnalyticsData}>
                    <LetsGoButton to={{
                        pathname: `${props.match.params.cityname}/experiences/${experience.nickname}`,
                        state: props.location.state
                    }}
                    palette="tertiary">
                        Explore more
                    </LetsGoButton>
                </ButtonWrapper>

Please let me know if there is anything else that I can provide that would be helpful. I've tried to do research on how history.push works exactly, but I haven't been able to find much. My best guess is that it takes the current location, and adds on the provided url. Even if that's the case, I can't understand why it would be applying istanbul twice.

afaik, by now react router does not support relative urls intentionally. So it's rather unexpected behavior. What's the version do you use? — skyboyer
– skyboyer, Commented Sep 30, 2019 at 19:22
using react router v4. The thing is, I'm trying to use absolute URLs. as can be seen, the absolute url being requested is /${suggestion.nickname}/ (which turns out to be /istanbul, /vancouver etc) — Tycholiz
– Tycholiz, Commented Sep 30, 2019 at 19:32
Any reason for using "<Redirect to="/:cityname" />" as you already have defined the route for it. — Garry
– Garry, Commented Sep 30, 2019 at 20:45

Tycholiz · Accepted Answer · 2019-10-01 21:00:01Z

6

I figured out the problem on this one. One of the commenters suggested that I had been using relative paths rather than absolute. I erroneously thought that he was incorrect, seeing as I seemingly have the full url in there. My mistake was to not start off the url with /

before: ${props.match.params.cityname}/experiences/${experience.nickname}

after: /${props.match.params.cityname}/experiences/${experience.nickname}

I hope this helps someone out.

answered Oct 1, 2019 at 21:00

Tycholiz

1,2205 gold badges19 silver badges39 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Abdurauf Sherkulov Over a year ago

I was about waste my life but this saved my precious minutes.

Collectives™ on Stack Overflow

react router duplicated URL params

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related