React Router: What’s the Difference Between Components and Routes?

Be worry-free and enjoy React Router like a pro

Sylwia Vargas
Feb 18 · 2 min read
Route 66 Printed on Road from Pexels.com

React Router (DOM) is an amazing NPM package that allows you to escape the hell of SPA. In my teaching experience, I see that people don’t often dig into the docs. Instead, they see a few code examples and just pattern match their way through creating their app. That’s totally fine…until it’s not.

I’ve noticed new programmers develop a strong habit and preference for either render={this.renderComponent}or component={ComponentName}. Subsequently, they run into trouble. While both work, they behave differently. Let me explain why.


Setup

As you can see, we render the homepage component on line 20 and then we render the Profile component on the next line. We pass additional props of the user object to the Profile component. You could use either render or component to associate a given React Component with a path — but which one should you use?


Component or Render?

  • render makes the component mount just once, then re-render when required. The component stays in the background — this means that anything you put in componentDidMount, constructor, or, for example, shouldComponentUpdate, will run only once! Also, because the component doesn’t unmount, you may run into data leakage. You could force the component to re-render but is the juice worth the squeeze?
  • component, on the other hand, reinstantiates the component on every visit (the component mounts, unmounts and, if you visit, mounts again). This syntax is an abstraction of React.createElementbecause of that, it is less efficient in terms of performance but in some cases more necessary.

In general, render works best with functional components, as they do not have lifecycle methods by default, and component works best with class components.


Access to Route Props and Props

Better Programming

Advice for programmers.

Thanks to Zack Shapiro

Sylwia Vargas

Written by

I teach React, JavaScript, Ruby, Rails at Flatiron School | Follow me: https://twitter.com/sylwiavargas

Better Programming

Advice for programmers.

More From Medium

More from Better Programming

More from Better Programming

More from Better Programming

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade