React doesn't rerender when redirecting to same route

Question

I'm newer to react. I have a react/node app that shows different data on tv monitors all going to different urls. localhost/s/1... localhost/s/2, etc. We want to move to just using 1 monitor that auto updates itself. I thought we could use a redirect triggered by the timer we have running. When the redirect fires the url does change but no data updates using the new url param because we're going to the same route.

UpdateTimer = ({ time, rest }) => {
    this.setState({ time, rest })

    const screenNumber = this.props.match.params.id

    if (rest === false && time === "0:01" && parseInt(screenNumber) < 7){
        this.props.history.push(`/s/${parseInt(screenNumber)+1}`)
        this.setState({ time: "1:00", rest : true })
    }
 }

I tried adding timestamp to the route with no effect. Reload component via <Link> in React Router

<Route path="/s/:id" component={(props) => <Screens timestamp={new Date().getTime().toString()} {...props} socket={socket} /> } />

Any suggestions for updating data with the new url param?

EDIT: here is the component code. The timer counts from 4:00 to 0:00 then 1:00 of rest where rest is true then goes back to 4:00. I need the redirect to fire where rest is false and the timer is 0:01.

componentDidMount() {
  const screenNumber = this.props.match.params.id
  const { socket } = this.props

  socket.on('connect', () => {
  socket.emit('joinRoom', 'screens')
  socket.emit('initScreen', screenNumber)
  })
  socket.on('timer', ({ time, rest }) => this.UpdateTimer({ time, rest }))
  socket.on('screenInfo', data => this.UpdateScreenInfo({ data }))
  socket.on('queueInfo', data => this.UpdateQueueInfo({ data }))
  socket.on('queue', ({ queue }) => this.UpdateQueue({ queue, screenNumber }))
  }

What is triggering UpdateTimer function? When is `rest` false? Can you share more of the component code? — Pandaiolo, Apr 21 '21 at 20:35

score 0 · Answer 1 · answered Apr 21 '21 at 21:01

0

Try using key atribute with param ID used in the route path to force React remount the component:

<Route
  path="/s/:id"
  component={(props) => (
    <Screens
      timestamp={new Date().getTime().toString()}
      {...props}
      socket={socket}
      key={props.match.params.id}
    />
  )}
/>

answered Apr 21 '21 at 21:01

Cássio Lacerda

669
5
9

Thanks but tried it and still no data updated. – Andrew Kloos Apr 21 '21 at 21:28

score 0 · Accepted Answer · answered Apr 22 '21 at 20:55

Ok, couple of things wrong with my code that this post addresses... React history.push() is updating url but not navigating to it in browser

First, Import history and pass to the Router. Also, I was using BrowserRoute instead of Router.

import createHistory from 'history/createBrowserHistory';
const history = createHistory();


render() {
  const { loggedIn } = this.props
  
  return (
    <Router history={history}>
      <Switch>
        {!loggedIn && <Route path="/" component={(props) => <Auth socket={socket} {...props} /> }/> }
        <Route exact path="/admin" component={(props) => <Admin socket={socket} {...props} /> } />
        <Route path="/s/back" component={(props) => <BackScreen socket={socket} {...props} /> } />
        <Route path="/s/front" component={(props) => <FrontScreen socket={socket} {...props} /> } />
        <Route
                path="/s/:id"
                component={(props) => (
                  <Screens
                    {...props}
                    socket={socket}
                  />
                )}
              />
        <Redirect to={'/s/1'} />
      </Switch>
    </Router>
  )
}

Then use history.push where you want to redirect.

import createBrowserHistory from 'history/createBrowserHistory';
import './styles.css'

const history = createBrowserHistory({forceRefresh:true});

class Screen extends Component {
  state = {
    time: '',
    rest: false,
    workout: [],
    queue: [],
  }

  UpdateTimer = ({ time, rest }) => {
    this.setState({ time, rest })

    const screenNumber = this.props.match.params.id

    if (rest === false && time === "0:00" && parseInt(screenNumber) < 6){
      this.setState({ time: "1:00", rest : true })
      history.push(`/s/${parseInt(screenNumber)+1}`);
    }else if (rest === false && time === "0:00" && parseInt(screenNumber) === 6){
      this.setState({ time: "1:00", rest : true })
      history.push(`/s/1`);
    }
  }

React doesn't rerender when redirecting to same route

2 Answers2