react router v4 navigate/reload the same route

Question

Whether it's using this.props.history.push or <Link to={}> the component won't rerender if it's already at the same url.

Sometime in my container there will be logic that render different pieces, I don't want to use window.location.reload() to hard refresh the entire thing.

Try look into [conditional rendering](https://reactjs.org/docs/conditional-rendering.html), maybe that's what you want instead of reloading the page — Edwin Harly, Jul 20 '18 at 06:19
When you want to update same page don't reload it to update it, update state to update view. — Rehan Haider, Jul 20 '18 at 06:59
@EdwinHarly I know what is conditional rendering, but this question is about routing. — Melissa93, Jul 23 '18 at 00:31

score 0 · Answer 1 · answered Jul 16 '22 at 10:43

This is what I did and its working.

<Route path='/get-random-poll' exact>
        <Redirect
             to={{
                  pathname: 'polls',
                  state: {
                     randomPoll: true
                  }
             }}
       />
</Route>

I make a route /get-random-poll that has nothing but redirect to the /polls. So when you are on /polls, router goes /get-random-poll and it redirects to /polls

score -1 · Answer 2 · edited Jul 20 '18 at 07:20

-1

You can use history.pushState or history.replaceState. They should do the trick.

About the difference between them: https://stackoverflow.com/a/17507140/5709697

edited Jul 20 '18 at 07:20

Prashant Pimpale

10,349
9
44
84

answered Jul 20 '18 at 07:16

Azamat Zorkanov

779
1
4
9

what is the different btw `this.props.history.push` vs `history.pushState`? My question is about react-router not browser API. – Melissa93 Jul 23 '18 at 00:32

react router v4 navigate/reload the same route

2 Answers2