To test the preceding setup, let's first create a <Link> component in our navbar and a corresponding <Route> with the same path name:
<Link
to={{
pathname: '/dashboard',
search: 'q=1',
hash: 'test',
state: { key: 'value' }
}}
>
Dashboard
</Link>
...
<Route path='/dashboard' component={Dashboard} />
Notice that the <Link> component specifies the to object with the pathname, search, hash, and state properties. We will read this information from the Redux store in our rendered component:
const Dashboard = ({ pathname, search, hash, state, count }) => {
return (
<div>
<h4>In Dashboard</h4>
<div> Pathname : {pathname} </div>
<div>...