React Router -- history push state not refreshing with new state object

Question

When Promise.all resolves and the new activity is saved, the user should be routed to /activities to view their newly created activity. Everything works as expected, however I currently need to refresh /activities page (once) after being routed in order to view the new activity in the table.

  const handleSaveActivity = e => {
    e.preventDefault();
    Promise.all([
      addActivity(),
      saveActivity()
    ]).then(() => {
      props.history.push('/activities');
    })
  };

I'm not sure how to re-render the page automatically after pushing a new history state, so the user does not need to manually refresh the page to see the new state. Happy to provide more code snippets if I left out something critical.

You would need to show the code on activities component since that is where the problem lies. — Y M, Nov 12 '19 at 05:19

score 1 · Answer 1 · answered Dec 08 '20 at 13:37

Hi i must be a little late to answer this, but this issue can be due to the wrong use of useEffect, if you have lets say a todo list and you wanna fetch data with axios for example, it would look like this:

useEffect(()=>{
    axios.get(`${YOUR_URL}/todos`)
      .then((res)=>{
        setTodos(todos=res.data)
      })
  },[])

now as you can see we have initial value of an empty array, so this is acting as a ComponentDidMount, what you might want is to re render the component after it gets a new value, so you want to have a ComponentDidUpdate effect, so you would just not initialize the value as an empty array, therefore it would look like this:

useEffect(()=>{
    axios.get(`${YOUR_URL}/todos`)
      .then((res)=>{
        setTodos(todos=res.data)
      })
  })

Hope this helps someone, couse i landed here due to the same issue and came to solve it this way.

score 0 · Answer 2 · answered Nov 12 '19 at 05:55

0

just to run this.setState({whateverKey:whateverValue})?

answered Nov 12 '19 at 05:55

IgorK

148
8

score 0 · Answer 3 · answered Nov 12 '19 at 06:57

In your activities page (call it Activities component) you should call API to get the updated data every time browser hit this component URL.

With class based style, you should do it in componentDidMount life cycle hook

class Activities extends Component {
  // ...
  componentDidMount() { loadActivities() }
  // ...
}

With function based style, you should do it in useEffect hook

import React, { useEffect } from 'react'

const Activities = () => {
  useEffect(() => { loadActivities() });
}

score 0 · Answer 4 · answered Mar 29 '21 at 23:36

0

https://github.com/supasate/connected-react-router Please use this package, it solves the problem.

answered Mar 29 '21 at 23:36

Yami Danchou

215
1
2
16

Kindly add context to any links so your Answer is self contained, meaning the answer needs to be here in the Answer itself. See ["Provide context for links"](https://stackoverflow.com/help/how-to-answer). It would be preferable if you could answer the Question in your own words here and link only as a reference. How does it work? Please show how it solves the issue. – Scratte Apr 02 '21 at 17:58

score 0 · Answer 5 · answered Mar 12 '22 at 07:33

0

This issue I've faced a few minutes ago...however I finally found the solution by manually using the vanilla javascript. => for refreshing the page you can use => window.location.reload(false); after using the push property.

answered Mar 12 '22 at 07:33

Kamrul Hasan Rahat

117
1
5

React Router -- history push state not refreshing with new state object

5 Answers5