Sometimes we may want to pass something more than just the route’s param or URL params into a component. Sure, we can extract the params that got us to render this component using 

<Router path="/:handle" />

// url -> https://localhost:3000/johnny?sort=asc
function Profile() {
	const { handle } = useParams();
	const location = useLocation();
	const { search } = location;
	const params = new URLSearchParams(search);
	const filter = params.get('sort');
	console.log(handle) // johnny
	console.log(handle) // asc
}

But sometimes we may want to pass a bit more than that to the component we know will render when we send the user to another route with a 

 URL params are constrained and limited to string. How would we pass something more complex like an object? The link components 

 prop, allows us to not only give it a string, but also an object like this:

<Link
  to={{
    pathname: "/johnny",
    state: {
      fromNotifications: true,
    },
  }}
>
  Johnny Depp
</Link>

How would we get that state object out within the component that renders on that pathnames route?

<Router path="/:handle" />

// url -> https://localhost:3000/johnny
function Profile() {
	const { handle } = useParams();
	const location = useLocation();
	const { state } = location;
	const { fromNotifications } = state;
	console.log(handle) // johnny
	console.log(fromNotifications) // true
}

Passing props to Link