javascript - onEnter prop in react-router v4 - Stack Overflow

admin管理员组

文章数量:1326118

I'm using react-router v4. I find it confusing that when I click on <Link> ponent, the route is immediately changed. I want to stay at the current route before I fetch the data, not to switch the route and then fetch the data. I find that in react-router v3 there's a onEnter hook, but now in react-router v4, it is deprecated. So how can I fetch data right after I click on <Link> ponent and before the route is changed?

Example:

it's: at A -> click at <Link> to B -> fetching data for B -> render B

not: at A -> click at <Link> to B -> render Route B -> fetching data for B -> rerender B

I'm using react-router v4. I find it confusing that when I click on <Link> ponent, the route is immediately changed. I want to stay at the current route before I fetch the data, not to switch the route and then fetch the data. I find that in react-router v3 there's a onEnter hook, but now in react-router v4, it is deprecated. So how can I fetch data right after I click on <Link> ponent and before the route is changed?

Example:

it's: at A -> click at <Link> to B -> fetching data for B -> render B

not: at A -> click at <Link> to B -> render Route B -> fetching data for B -> rerender B

• javascript
• reactjs
• react-router
• frontend

Share Improve this question Follow edited Nov 22, 2017 at 18:33 Shubham Khatri 282k5858 gold badges431431 silver badges411411 bronze badges asked Aug 1, 2017 at 5:57 ONI AKIONI AKI 3111 silver badge77 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 6

In react-router v4, you can make use of render prop to Route to replace the onEnter functionality existing in react-router v3

Suppose you have a route like in react-router v3

<Route path="/" ponent={Home} onEnter={getData} />

The Equivalent of this in react-router v4 would be

<Route exact path="/" render= {() => {getData(); return <Home data={this.state.data}/>}} />

However the suggested method is to make use of lifecycle methods in the ponent.

From the Github discussion:

We have no lifecycle hooks that receive props on initial render.

We no longer have a "route lifecycle". Instead, since <Match> ponents are real ponents (not pseudo-ponents like s were) they get to participate in React's lifecycle, which means they can just use ponentWillMount.

So one of the suggested solution is:

v4 is all about routes just being ponents. That means taking advantage of lifecycle methods.

ponentWillMount() { // or ponentDidMount
  fetch(this.props.match.params.id)
}

ponentWillReceiveProps(nextProps) { // or ponentDidUpdate
  if (nextProps.match.params.id !== this.props.match.params.id) {
    fetch(nextProps.match.params.id)
  }
}

本文标签： javascriptonEnter prop in reactrouter v4Stack Overflow