crashdaddy

Jun 21, 2020

6 min read

How to Pass Props Through React-Router Path Links

Introduction

The Situation

That’s some ripe puzzle-solvin’ material right there
I could solve this puzzle all day
const Router = () => {
return (
<Switch>
<Route exact path ="/" component={PuzzlePicker} />
<Route path="/search/:query?" component={PuzzlePicker} />
<Route path="/puzzle/:id" component={App} />
</Switch>
)
}

The Solution

class Puzzle extends React.Component {
state = {
puzzleDetails: null
}
componentDidMount () {
const { photoId} = this.props.match.params
fetch(`https://api.unsplash.com/photos/${photoId}`)
.then((puzzleData) => {
this.setState(() => ({ puzzleData }))
})
}
render() {
...
}
}

The Nother Problem

The Nother Solution

<Link to={{ pathname: `/puzzle/${puzzle.id}`, state: { puzzle} }} >
[{"id":"M8Q1d953AdE",
"created_at":"2019-08-27T02:59:55-04:00",
"updated_at":"2020-05-14T01:13:54-04:00",
"promoted_at":null,"
width":3561,
"height":3554,
"color":"#F9E051",
"description":"whisky art",
"alt_description":"bottle on wood",
"urls":{
"raw":"https://images.unsplash.com/photo-1566889034273-0b5ec95bb736?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjE0MzIzN30",
"full":"https://images.unsplash.com/photo-1566889034273-0b5ec95bb736?ixlib=rb-1.2.1&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0MzIzN30",
"regular":"https://images.unsplash.com/photo-1566889034273-0b5ec95bb736?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=1080&fit=max&ixid=eyJhcHBfaWQiOjE0MzIzN30",
"small":"https://images.unsplash.com/photo-1566889034273-0b5ec95bb736?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=400&fit=max&ixid=eyJhcHBfaWQiOjE0MzIzN30",
"thumb":"https://images.unsplash.com/photo-1566889034273-0b5ec95bb736?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=200&fit=max&ixid=eyJhcHBfaWQiOjE0MzIzN30"},
"links":
{"self":"https://api.unsplash.com/photos/M8Q1d953AdE",
"html":"https://unsplash.com/photos/M8Q1d953AdE",
"download":"https://unsplash.com/photos/M8Q1d953AdE/download",
"download_location":"https://api.unsplash.com/photos/M8Q1d953AdE/download"},
"categories":[],
"likes":5,
"liked_by_user":false,
"current_user_collections":[],
"sponsorship":null,
"user":{
"id":"55whWhfRi0E",
"updated_at":"2020-05-09T02:54:05-04:00",
"username":"nepalbuda",
"name":"Garo Uzunyan",
"first_name":"Garo",
"last_name":"Uzunyan",
"twitter_username":null,
"portfolio_url":null,
"bio":null,
"location":null,
"links":{
"self":"https://api.unsplash.com/users/nepalbuda",
"html":"https://unsplash.com/@nepalbuda",
"photos":"https://api.unsplash.com/users/nepalbuda/photos",
"likes":"https://api.unsplash.com/users/nepalbuda/likes",
"portfolio":"https://api.unsplash.com/users/nepalbuda/portfolio",
"following":"https://api.unsplash.com/users/nepalbuda/following",
"followers":"https://api.unsplash.com/users/nepalbuda/followers"},
"profile_image":{
"small":"https://images.unsplash.com/profile-fb-1566888726-7698a4b5904a.jpg?ixlib=rb-1.2.1&q=80&fm=jpg&crop=faces&cs=tinysrgb&fit=crop&h=32&w=32",
"medium":"https://images.unsplash.com/profile-fb-1566888726-7698a4b5904a.jpg?ixlib=rb-1.2.1&q=80&fm=jpg&crop=faces&cs=tinysrgb&fit=crop&h=64&w=64",
"large":"https://images.unsplash.com/profile-fb-1566888726-7698a4b5904a.jpg?ixlib=rb-1.2.1&q=80&fm=jpg&crop=faces&cs=tinysrgb&fit=crop&h=128&w=128"},
"instagram_username":null,
"total_collections":0,
"total_likes":1,
"total_photos":9,
"accepted_tos":true},
"exif":
{"make":"Canon",
"model":"Canon EOS 6D",
"exposure_time":"1/500",
"aperture":"5.0",
"focal_length":"118.0",
"iso":125},
"location":{
"title":null,
"name":null,
"city":null,
"country":null,
"position":{
"latitude":null,
"longitude":null}
},
"views":69497,
"downloads":203
}
class Puzzle extends React.Component {
state = {
puzzleDetails: null
}
componentDidMount () {
const { photoId} = this.props.match.params
this.setState({
puzzleDetails: props.location.state.puzzle
})
render() {
...
}
}

The Nother Nightmare

https://puzlr.herokuapp.com/XKCD69BDSM420
Try explaining this to the boss

The Nother Solution

Thanks, internet stranger!