CODEWITHSUNDEEP
javascriptreactjsreact-routerrefreshhtml5-history
BWeb303
BWeb303

Reputation: 303

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

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.

Upvotes: 1

Views: 2686

Answers (5)

Kamrul Hasan Rahat
Kamrul Hasan Rahat

Reputation: 117

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.

Upvotes: 0

Yami Danchou
Yami Danchou

Reputation: 215

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

Upvotes: 0

GunnerAndesen
GunnerAndesen

Reputation: 11

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.

Upvotes: 1

thelonglqd
thelonglqd

Reputation: 1862

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() });
}

Upvotes: 0

IgorK
IgorK

Reputation: 144

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

Upvotes: 0

Related Questions