Here's a scenario I want you to think through. Say you were in charge of building out the onboarding flow for your app. Unlike a generic onboarding flow, this one's a little more personalized. The reason for that is because each step is going to change based on the result of the previous step.
For example, say the first step was to get a user's occupation and years experience. From there, we take them to the next step which, based on their occupation and experience, collected more relevant information. How would you go about solving this?
There are a few different approaches, but the one we'll focus on in this post is centered around being able to pass data from one route to another. To do this with React Router, we can pass data from the Link
component through to the new Route
that is being rendered.
Now the only question is, how? You're probably familiar with the most common way to use Link
. It looks something like this,
<Link to={`/onboarding/profile`}>Next Step</Link>
When the user clicks on Next Step
, they'll be taken to /onboarding/profile
. But as we talked about above, we also want to be able to include what route they're coming from.
To do this (and to pass along any other data as well), all you have to do is include a state
prop with the data you want to pass along – in our case, where the user is coming from
.
<Link to="/onboarding/profile" state={{ from: "occupation" }}>Next Step</Link>
Now the only question that remains is, how do we get access to the data on state
so we can update the UI based on it? To answer that, we need to look at the component that's being rendered at the /onboarding/profile
route. For our example, let's call it Profile
.
import { useLocation } from 'react-router-dom'function Profile () {const location = useLocation()const { from } = location.statereturn (...)}
Anytime you pass data along via the state
property, that data will be available on the location
's state
property, which you can get access to by using the custom useLocation
Hook that comes with React Router.
Also, if the user were to use their browser's "Back" and "Forward" buttons to navigate through their route history, the state that we passed in would remain intact. That way, if they changed their mind about one of their selections, they can click "Back" without losing any of the state from their previous choices.
To recap, if you need to pass data from Link
through to the new component that's being rendered, pass Link
s a state
prop with the data you want to pass through.
Then, to access the Link
s state
property from the component that's being rendered, use the useLocation
Hook to get access to location.state
.
Before you leave
I know, "another newsletter pitch" - but hear me out. Most JavaScript newsletters are terrible. When's the last time you actually looked forward to getting one? Even worse, when's the last time you actually read one rather than just skim it?
We wanted to change that, which is why we created Bytes. The goal was to create a JavaScript newsletter that was both educational and entertaining. 97,443 subscribers and an almost 50% weekly open rate later, it looks like we did it.
Delivered to 97,443 developers every Monday

Sdu
@sduduzo_g
This is the first ever newsletter that I open a music playlist for and maximize my browser window just to read it in peace. Kudos to @uidotdev for great weekly content.

Brandon Bayer
@flybayer
The Bytes newsletter is a work of art! It's the only dev newsletter I'm subscribed too. They somehow take semi boring stuff and infuse it with just the right amount of comedy to make you chuckle.

John Hawley
@johnhawly
Bytes has been my favorite newsletter since its inception. It's my favorite thing I look forward to on Mondays. Goes great with a hot cup of coffee!

Garrett Green
@garrettgreen
I subscribe to A LOT of dev (especially JS/TS/Node) newsletters and Bytes by @uidotdev is always such a welcomed, enjoyable change of pace to most (funny, lighthearted, etc) but still comprehensive/useful.

Muhammad
@mhashim6_
Literally the only newsletter I’m waiting for every week.

Grayson Hicks
@graysonhicks
Bytes is the developer newsletter I most look forward to each week. Great balance of content and context! Thanks @uidotdev.

Mitchell Wright
@mitchellbwright
I know I've said it before, but @tylermcginnis doesn't miss with the Bytes email. If you're a developer, you really need to subscribe

Ali Spittel
@aspittel
Can I just say that I giggle every time I get the @uidotdev email each week? You should definitely subscribe.

Chris Finn
@thefinnomenon
Every JavaScript programmer should be subscribed to the newsletter from @uidotdev. Not only do they manage to succinctly cover the hot news in the JavaScript world for the week but it they manage to add a refreshing humor to it all.