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!

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