Countries Info App

Community feedback

• 

  David Omar•580

  @davidomarfPosted about 4 years ago

  Hey!

  Yes, there's a more elegant and idiomatic solution: Link.

  It's a component that when clicked, will automatically redirect you to what you tell it to. Without weird handlers that render a <Redirect>.

  Then you move your styles from the div.whateverClass to a.whateverClass.

  <Link to={`/countries/${country.name}`}>
      <div className={styles.flag}>
          <img src={country.flag} alt={country.name} />
        </div>
        <div className={styles.info}>
          //...
        </div>
  </Link>
  

  1

  ---

  

  David Omar•580

  @davidomarfPosted about 4 years ago

  @davidomarf And remove the

  <Route path="/countries/redirect/:name component={DetailsRedirect}/>.

  Handle all your redirects with Link.

  0

  

  pogov•50

  @pogovPosted about 4 years ago

  @davidomarf Thanks for your help.

  0

  

  pogov•50

  @pogovPosted about 4 years ago

  @davidomarf Can you help with another thing? In the DetailsTemplate component I am maping over border countries and I've used Redirect here as well to navigate to the Details page of the border country. Now I wanted to refactor using Link but I have a problem because after user clicks on the link the url is changing as expected but component does not re-render with the new country details (it renders only when user manualy refresh the page). Thank you in advance.

  0

  

  David Omar•580

  @davidomarfPosted about 4 years ago

  @pogov I think that is happening because it's rendering the same route. So it's rendering the same component. And you only handle the "DidMount" life cycle.

  This means that all your logic is only running the first time you mount the component.

  To fix it, you could handle those changes yourself using componentDidUpdate. If you try this, start logging this.props. The logic should be similar to what you have in componentDidMount (you could even move all that into a separate function, and then just call that function in both componentDidMount and componentDidUpdate.

  However, there an easier fix, and it's adding a key when you're rendering the page from the router. So it'd be like this:

  <Route exact path="/countries/:name" render={(props) => (
    <Details key={props.match.params.name} {...props} />)
  } />
  

  With this, when the route changes, it'll match that path. And instead of just saying "Oh, yeah, I have already rendered that, here it is again", it'll create a new component Details that has the key :name that matched that path.

  ---

  If a key changes, it'll always re-render a component. You can read more about it here: https://kentcdodds.com/blog/understanding-reacts-key-prop

  1