Passing state from Link to Route in HashRouter

Question

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

Please refer to this question, your query has been answered here https://stackoverflow.com/questions/30115324/pass-props-in-link-react-router or you can refer to various types of Link available here https://reactrouter.com/web/api/Link — pavan kumar, Sep 26 '20 at 13:57

score 0 · Accepted Answer · answered Sep 28 '20 at 10:54

0

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

answered Sep 28 '20 at 10:54

swayamraina

2,958
26
28

Passing state from Link to Route in HashRouter

1 Answers1