Passing state from Link to Route in HashRouter

1.1k views Asked by At

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

1

There are 1 answers

0
swayamraina On BEST ANSWER

Turns out I was passing the state from a different component. Closing the question.