javascript - React-Router not unmounting on location parameter change - Stack Overflow

admin管理员组

文章数量:1023538

This problem is driving me insane, I got a simple little app created by create-react-app and I am using React-Router.

JSX:

<Router>
    <Route path="/pages/:pageId" ponent={Page} />
</Router>

In the Page ponent I have an fetch on ponentDidMount, its working as expected first time the route is loaded.

For example I visit: /pages/13 and then it fetches that pages data, but when I am on: /pages/13 and then click on a Link ponent (imported from React-Router) redirecting me to: /pages/15 - the pageId prop is then updated but it never re-renders.

The Page ponent never run ponentWillUnmount before, or ponentDidMount after.

Expected behavior:

1. Visit: /pages/13 → render() → ponentDidMount() → render()
2. Click on Link ponent /pages/15 → ponentWillUnmount() → render() → ponentDidMount() → render()

---

I am using the following versions:

• react: 16.3.2
• react-dom: 16.3.2
• react-router-dom: 4.2.2

---

What am I doing wrong? I am still pretty new to React so be nice :)

This problem is driving me insane, I got a simple little app created by create-react-app and I am using React-Router.

JSX:

<Router>
    <Route path="/pages/:pageId" ponent={Page} />
</Router>

In the Page ponent I have an fetch on ponentDidMount, its working as expected first time the route is loaded.

For example I visit: /pages/13 and then it fetches that pages data, but when I am on: /pages/13 and then click on a Link ponent (imported from React-Router) redirecting me to: /pages/15 - the pageId prop is then updated but it never re-renders.

The Page ponent never run ponentWillUnmount before, or ponentDidMount after.

Expected behavior:

1. Visit: /pages/13 → render() → ponentDidMount() → render()
2. Click on Link ponent /pages/15 → ponentWillUnmount() → render() → ponentDidMount() → render()

---

I am using the following versions:

• react: 16.3.2
• react-dom: 16.3.2
• react-router-dom: 4.2.2

---

What am I doing wrong? I am still pretty new to React so be nice :)

• javascript
• reactjs
• react-router

Share Improve this question Follow edited Jun 20, 2020 at 9:12 CommunityBot 111 silver badge asked Apr 27, 2018 at 12:53 MrZiggyStardustMrZiggyStardust 73366 silver badges1919 bronze badges 1

• 2 Possible Duplicate of React doesn't reload ponent data on route param change – Shubham Khatri Commented Apr 27, 2018 at 13:17

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 3

Your problem is that ponentDidMount only executes when the ponent is pletely mounted, and this only occurs one time. In this case, changing the route param doesn't change the ponent, I mean, you still being in the same ponent when you change the pageId, thus the ponentDidMount is never executed again. What could you do then?, well, I suggest you to look into ponentWillReceiveProps(newProps) method, this is executed whenever the ponent's props are about to be modified, which in this case, is what you are looking for, because, according to this:

You’ll have access match objects in various places: Route ponent as this.props.match; Route render as ({ match }) => (); Route children as ({ match }) => (); withRouter as this.props.match; matchPath as the return value;

the match object (which contains the route params) is given through ponent's props.

So, short answer. Use ponentDidMount for first time fetching, and then use ponentWillRecieveProps(newProps) for all the rest fetching calls.

check this for more info.

Note: I didn't know that ponentWillRecieveProps(newProps) was about to be somewhat deprecated, anyways, it suggest you to use getDerivedStateFromProps(nextProps, prevState) which is basically the same

When parameter is changing, your Route doesn't remount your ponent. This is an expected behaviour. You should catch the parameter changing via ponentWillReceiveProps, otherwise if you wish to force remounting, you should use <Route path="/your/path/with/:id" render={props => <Component {...props} key={props.params.id} />

This problem is driving me insane, I got a simple little app created by create-react-app and I am using React-Router.

JSX:

<Router>
    <Route path="/pages/:pageId" ponent={Page} />
</Router>

In the Page ponent I have an fetch on ponentDidMount, its working as expected first time the route is loaded.

For example I visit: /pages/13 and then it fetches that pages data, but when I am on: /pages/13 and then click on a Link ponent (imported from React-Router) redirecting me to: /pages/15 - the pageId prop is then updated but it never re-renders.

The Page ponent never run ponentWillUnmount before, or ponentDidMount after.

Expected behavior:

1. Visit: /pages/13 → render() → ponentDidMount() → render()
2. Click on Link ponent /pages/15 → ponentWillUnmount() → render() → ponentDidMount() → render()

---

I am using the following versions:

• react: 16.3.2
• react-dom: 16.3.2
• react-router-dom: 4.2.2

---

What am I doing wrong? I am still pretty new to React so be nice :)

This problem is driving me insane, I got a simple little app created by create-react-app and I am using React-Router.

JSX:

<Router>
    <Route path="/pages/:pageId" ponent={Page} />
</Router>

In the Page ponent I have an fetch on ponentDidMount, its working as expected first time the route is loaded.

For example I visit: /pages/13 and then it fetches that pages data, but when I am on: /pages/13 and then click on a Link ponent (imported from React-Router) redirecting me to: /pages/15 - the pageId prop is then updated but it never re-renders.

The Page ponent never run ponentWillUnmount before, or ponentDidMount after.

Expected behavior:

1. Visit: /pages/13 → render() → ponentDidMount() → render()
2. Click on Link ponent /pages/15 → ponentWillUnmount() → render() → ponentDidMount() → render()

---

I am using the following versions:

• react: 16.3.2
• react-dom: 16.3.2
• react-router-dom: 4.2.2

---

What am I doing wrong? I am still pretty new to React so be nice :)

• javascript
• reactjs
• react-router

Share Improve this question Follow edited Jun 20, 2020 at 9:12 CommunityBot 111 silver badge asked Apr 27, 2018 at 12:53 MrZiggyStardustMrZiggyStardust 73366 silver badges1919 bronze badges 1

• 2 Possible Duplicate of React doesn't reload ponent data on route param change – Shubham Khatri Commented Apr 27, 2018 at 13:17

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 3

Your problem is that ponentDidMount only executes when the ponent is pletely mounted, and this only occurs one time. In this case, changing the route param doesn't change the ponent, I mean, you still being in the same ponent when you change the pageId, thus the ponentDidMount is never executed again. What could you do then?, well, I suggest you to look into ponentWillReceiveProps(newProps) method, this is executed whenever the ponent's props are about to be modified, which in this case, is what you are looking for, because, according to this:

You’ll have access match objects in various places: Route ponent as this.props.match; Route render as ({ match }) => (); Route children as ({ match }) => (); withRouter as this.props.match; matchPath as the return value;

the match object (which contains the route params) is given through ponent's props.

So, short answer. Use ponentDidMount for first time fetching, and then use ponentWillRecieveProps(newProps) for all the rest fetching calls.

check this for more info.

Note: I didn't know that ponentWillRecieveProps(newProps) was about to be somewhat deprecated, anyways, it suggest you to use getDerivedStateFromProps(nextProps, prevState) which is basically the same

When parameter is changing, your Route doesn't remount your ponent. This is an expected behaviour. You should catch the parameter changing via ponentWillReceiveProps, otherwise if you wish to force remounting, you should use <Route path="/your/path/with/:id" render={props => <Component {...props} key={props.params.id} />

本文标签： javascriptReactRouter not unmounting on location parameter changeStack Overflow