How to Pass Props Through React-Router Path Links


That’s great!

But then you find out that one of your pages needs to redirect the user to another page along with some props that they’ll need once they get there!

You don’t want to use a global state manager like Redux, because who knows why you do the crazy things that you do, but you still need a way.

I can tell by the amount of people I ran into with the same problem while I was researching my own solution that this comes up quite a bit in development.

The Situation

For my capstone project at good ‘ol Austin Coding Academy (what problem does it solve? Boredom!) I’m building that fun puzzle game you see in the top image. It’s like a 2-D NxN Rubik’s Cube version of solving scrambled up photos.

I’m using Unsplash for the API to get all the photos, because why bother uploading and storing my own when there are 2 million of them just eager to be used?

The thing about Unsplash is they are very strict on attribution. You have to always show whose picture you’re using and provide links to their social media.

That’s a key element we’ll get to in a minute.

So you build a nice page where the user can select a photo they want to use as a puzzle, and it looks something like this:

That’s some ripe puzzle-solvin’ material right there

Then when the user selects one of those photos they’re redirected — or should I say, routed — to another page where that photo has been carved up and ready for solvin’.

I could solve this puzzle all day

Here’s my router setup:

const Router = () => {
return (
<Route exact path ="/" component={PuzzlePicker} />
<Route path="/search/:query?" component={PuzzlePicker} />
<Route path="/puzzle/:id" component={App} />

You can see where I’ve sent the puzzle’s ID in the url, both in that snippet of code and in the address bar of the picture above it.

Admit it. You didn’t even notice there was an address bar in that picture.

But here’s the thing about Unsplash. They have a specific link they want you to use to hotlink the image so they can trace all their uses. So you can’t just embed the ID into a url and use that as the image source. It’s a whole big thing with them.

The Solution

class Puzzle extends React.Component {
state = {
puzzleDetails: null
componentDidMount () {
const { photoId} = this.props.match.params
.then((puzzleData) => {
this.setState(() => ({ puzzleData }))
render() {

Well, that would be great, and ideally that’s the solution we’d want to implement.

The Nother Problem

With your cutting-edge infinite scroller algorithm on the search page and the fact that your app is so amazing that 11ty-thousand people want to use it at the same time, you can breeze through 50 calls in the first few minutes, let alone taking a whole hour!

Nope. We gots to get creative over here. Let’s put on our thinking caps.

The Nother Solution

Because url parameters are great for sending something simple like an ID or a query string or a page number, but what if we need to send something a little more complicated, like an object containing all the details about a puzzle from an API call we’ve already made and don’t want to make again?!

That’s where props.location.state comes in.

When you embed your Link component you can add a “state” object like this:

<Link to={{ pathname: `/puzzle/${}`, state: { puzzle} }} >

So now you’re calling the router with the path to the puzzle, with the appropriate ID, but you’re also sending along another item called “state” that represents an object called “puzzle” which is actually all the API results for that puzzle from the search page!

"description":"whisky art",
"alt_description":"bottle on wood",
"name":"Garo Uzunyan",
"model":"Canon EOS 6D",

Try shoving that all into a URL and you turn into early ‘00s Google.

Now you’re playing with power! Because you already had all that data on the search page, and when you send it through the react-router Link as a “state” object you can access the same data on the puzzle page without having to make a new API call!

And here’s how you retrieve the data from the destination page:

Remember our new friend props.location.state? Now in our Puzzle class from above we can just call all the data without a new fetch, like this:

class Puzzle extends React.Component {
state = {
puzzleDetails: null
componentDidMount () {
const { photoId} = this.props.match.params
puzzleDetails: props.location.state.puzzle
render() {

It was amazing. Everybody cheered and clapped. You got a corner office and a company car for your innovativity.

The Nother Nightmare

Like how cool would it be if people could just type in a link:

and it just goes to the particular puzzle they — or some friend they want to send the link to — can just jump right in to and start solving?

I’m thinking pretty cool.

However, by sending the puzzle data through the router as a prop from the search page, if one were to just enter that URL and go directly to that page none of the data would be there!

The page would devolve into a fiery mess of cryptic error messages.

Try explaining this to the boss

You’d be standing in your new office on the sidewalk, holding a box with your personal items from your desk while watching them drive off in your new company car.

But I’ve got your back again!

The Nother Solution

In your component that receives the data object through the react router path, just perform a test to see if that data exists, silly.

That way, if the data is sent through as a prop you don’t have to make an extra API call and erode your precious limited bandwidth from Unsplash. If it’s not, then you can just use the ID number from the URL and make the API call.

Now the boss is trying to get you to come back, but you already found another job where they respect your fortitude.

And you’re using your new fat raise to buy me coffee

Thanks, internet stranger!



4a 75 73 74 20 61 6e 6f 74 68 65 72 20 63 6f 6d 70 75 74 65 72 20 6e 65 72 64 20 77 69 74 68 20 61 20 62 6c 6f 67

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store

4a 75 73 74 20 61 6e 6f 74 68 65 72 20 63 6f 6d 70 75 74 65 72 20 6e 65 72 64 20 77 69 74 68 20 61 20 62 6c 6f 67