Problem description

I am using react-router-dom together with react functional ponents. I am trying to pass data with "history.push", which is not working.

The redirection to another page with "history.push" itself is working great. BUT the problem is: passing data via "state: {...}" to a ponent causes: "Cannot read property 'state' of undefined" when I try to access it with "props.location.state" within the ponent.

I have tried different variations of defining the route.

Code

app.js

import React from 'react';
import PageList from './pages/PageList';
import PageEdit from './pages/PageEdit';
import { BrowserRouter as Router, Route, Switch} from "react-router-dom";

export default function App() {
  return (
    <Router>
      <Switch>
        <Route exact path="/"> <PageList /> </Route>
        <Route path="/edit"> <PageEdit/> </Route>
      </Switch>
    </Router>
  );
}

PageList.js

import React from 'react';
import { useHistory } from "react-router-dom";
import Button from '@material-ui/core/Button';

export default function PageList() {
    let history = useHistory();

    function handleTestClick(e) {
        history.push({
            pathname: "/edit",
            state: {id: 123} 
        });
    }

    return (
        <div>
            <Button onClick={handleTestClick}>Test</Button>
        </div>
    );
}

PageEdit.js

import React, { useEffect } from 'react';

export default function PageEdit(props) {

    const test = props.location.state;
    console.log("Meine ID:" + test.id);


    return (
        <div>
            <h1>Edit Page</h1>
        </div>
    );
}

What I tried:

1. to use useEffect() to avoid any issues with reloading the page:

    useEffect(() => {
        const test = props.location.state;
        console.log("Meine ID:" + test.id);
    }, []);

2. other types of definitions for the route

<Route exact path="/" ponent={PageList}> </Route>
<Route path="/edit" ponent={PageEdit}> </Route>

3. add a location prop:

<Route exact path="/" ponent={PageList} location={props.location}> </Route>
<Route path="/edit" ponent={PageEdit} location={props.location}> </Route>

4. Pass props to ponent (even though it should be included automatically by React Router):

<Route exact path="/" ponent={PageList}> <PageList {...props}/> </Route>

Nothing worked

I expect the output of console.log(...) to be the data passed via history.push. Considering the docs of react router that should work in that way.

Can anyone help?

Problem description

I am using react-router-dom together with react functional ponents. I am trying to pass data with "history.push", which is not working.

The redirection to another page with "history.push" itself is working great. BUT the problem is: passing data via "state: {...}" to a ponent causes: "Cannot read property 'state' of undefined" when I try to access it with "props.location.state" within the ponent.

I have tried different variations of defining the route.

Code

app.js

import React from 'react';
import PageList from './pages/PageList';
import PageEdit from './pages/PageEdit';
import { BrowserRouter as Router, Route, Switch} from "react-router-dom";

export default function App() {
  return (
    <Router>
      <Switch>
        <Route exact path="/"> <PageList /> </Route>
        <Route path="/edit"> <PageEdit/> </Route>
      </Switch>
    </Router>
  );
}

PageList.js

import React from 'react';
import { useHistory } from "react-router-dom";
import Button from '@material-ui/core/Button';

export default function PageList() {
    let history = useHistory();

    function handleTestClick(e) {
        history.push({
            pathname: "/edit",
            state: {id: 123} 
        });
    }

    return (
        <div>
            <Button onClick={handleTestClick}>Test</Button>
        </div>
    );
}

PageEdit.js

import React, { useEffect } from 'react';

export default function PageEdit(props) {

    const test = props.location.state;
    console.log("Meine ID:" + test.id);


    return (
        <div>
            <h1>Edit Page</h1>
        </div>
    );
}

What I tried:

1. to use useEffect() to avoid any issues with reloading the page:

    useEffect(() => {
        const test = props.location.state;
        console.log("Meine ID:" + test.id);
    }, []);

2. other types of definitions for the route

<Route exact path="/" ponent={PageList}> </Route>
<Route path="/edit" ponent={PageEdit}> </Route>

3. add a location prop:

<Route exact path="/" ponent={PageList} location={props.location}> </Route>
<Route path="/edit" ponent={PageEdit} location={props.location}> </Route>

4. Pass props to ponent (even though it should be included automatically by React Router):

<Route exact path="/" ponent={PageList}> <PageList {...props}/> </Route>

Nothing worked

I expect the output of console.log(...) to be the data passed via history.push. Considering the docs of react router that should work in that way.

Can anyone help?

• javascript
• reactjs
• react-router

4 Answers 4

On PageEdit.js ,

you should access the state by using useLocation()

import {useLocation} from 'react-router-dom'
const location = useLocation() 
console.log(location.state) 

you will be able to access your data

According to the route documentation you are not using it correctly.

It should either be :

<Route exact path="/" ponent={PageList}> />

or

<Route exact path="/" render={props => <PageList {...props}> />

This way, you'll correctly have the props ing from react-router

url parameters

You should define your URL to accept an id url parameter.

<Route path="/edit/:id" ponent={PageEdit} />

So this way you can redirect to the proper location and even copy past URLs to share with the page id in it.

In <pageEdit /> ponent, you can access id using let { id } = useParams(); then load it from your list of pages.

Shared state between ponents

A more plex solution could be to adopt a shared state between all your ponent , which is what redux is design for.

Try to Pass Data like this

history.push({pathname:'your url', state:you data need to pass})