0

I'm currently having some trouble using React-router v4, with redirections when using URL parameters. Here's the route I'm using:

<Route path="/blog/page/:number" component={Blog} />

I'm using the UI framework Semantic-ui-react and its component Pagination ( https://react.semantic-ui.com/addons/pagination#pagination-example-shorthand) and I can't render its elements as Links or NavLinks from react-router-dom.

Instead, I have to use the event function onPageChange(activePage), which allow me to redirect to the page clicked. I figured a way to do so, by rendering a <Redirect to={location} push /> component from react-router-dom, and it works quite well except that it requires a component update management as it won't remount the component Blog...

My issue is, that I can't use browser's (chrome) button to navigate forward and backward, it just modifies the URL and doesn't remount the component. As I have no hook to control the browser "previous" and "next" button, I'm wondering how I could fix it. Thank you.

Who Knows
  • 101
  • 7
  • Welcome to Stackoverflow. Your question is not very clear. Do you need programing routing or implement forward and backward? Please be precise. – Gokhan Karadag May 13 '18 at 17:16
  • 1
    May be duplicate https://stackoverflow.com/questions/31079081/programmatically-navigate-using-react-router – Rajat Dhoot May 14 '18 at 11:01
  • Thank you. Actually this question is not a duplicate. I had already read this post, but I found no answer to my issue. Solutions given are not suitable in my case because I'm using a semantic-ui component. – Who Knows May 15 '18 at 11:31

2 Answers2

0

react-router has a built in history management and you can navigate using the push(new_location) function.

Mathieu K.
  • 903
  • 8
  • 27
  • The problem with react router v4 is that the method push will not do the job if you use the same component in your redirection. Simply because it will not unmount and remount it. You have to use URL management inside componentDidUpdate or use a forceRefresh props in browserRouter. – Who Knows May 15 '18 at 11:18
  • Yes that's what I do. componentDidUpdate checks if the state should be changed. Is there any reason you cannot do that? – Mathieu K. May 16 '18 at 10:01
0

I found a way. Actually when you push the previous and next button of your browser, if you are using the same component, the life cycle's methods componentWillUpdate () and componentDidUpdate() will be triggered. I parse the URL with this.props.history.location, and now, I can make sure that the component will rerender with the right datas when thoses buttons are pushed.

Who Knows
  • 101
  • 7