React-router，URL参数和以编程方式重定向

Question

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.

Answer 1

react-router具有内置的历史记录管理，您可以使用push(new_location)函数进行导航。

Answer 2

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.