I am unable to pass state from the <Link />
component to <Blog />
component via the <Route />
component
I am using
import { Switch, Route } from 'react-router-dom'
import { HashRouter } from 'react-router-dom';
Here is where I am standing,
function Blog (props) {
return (
<div>
<Link to={{ pathname: props.link, state: { title: "test title" } }} >
props.title
</Link>
</div>
);
}
export default Blog;
function Body (props) {
return (
<div className="body">
<Switch>
<Route exact path="/" component={Home} />
<Route exact path="/blogs/:type" component={BlogContent} />
</Switch>
</div>
);
}
export default Body;
function BlogContent (props) {
console.log(props.location.state). // <----- undefined
...
...
}
requested URL is an exact match to the router but the console prints state as undefined
Turns out I was passing the state from a different component. Closing the question.