React Router state persistence

#1

Hey guys,

I’m building a React game search app that fetches data from a 3rd party API. It retrieves a list of games and when I click on a game, the Link route passes that game’s data through the state location:

render() {
    const { icon, gameTitle, gameDetails } = this.props;

    return (
      <div className="game-box">
        <Link
          style={{ textDecoration: 'none' }}
          to={{
            pathname: "/details",
            state: { gameDetails }
          }}>

          <div className="game-content">
            <img className="game-icon" onError={this.addDefaultSrc} src={icon} alt="icon" />
            <p className="game-link"><strong>{gameTitle}</strong></p>
          </div>
        </Link>
      </div>
    );
  }

It then renders the game’s details. The problem is when I refresh the page, the state is cleared and I get an error. How do I get the state to remain on the details rendering even after reloading it? Any help would be greatly appreciated.

Here’s my repo: https://github.com/envincebal/react-game-search
Demo: https://envincebal.github.io/react-game-search/#/

1 Like
#2

Hey there,

how about fetching the details data in the details view, e.g. by writing/reading the URL?
Or saving the data in the browser storage and reading it in the details view?

1 Like
#3