history.push() 和 props.location.state 导致“无法读取未定义的属性‘状态’”

Question

问题描述

I am using react-router-dom together with react functional components. 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 component causes: "Cannot read property 'state' of undefined" when I try to access it with "props.location.state" within the component.

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="/" component={PageList}> </Route>
<Route path="/edit" component={PageEdit}> </Route>

3. add a location prop:

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

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

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

Nothing worked

我希望 console.log(...) 的输出是通过 history.push 传递的数据。考虑应该以这种方式工作的反应路由器的文档。

任何人都可以帮忙吗？

Answer 1

根据route文档，您没有正确使用它。

它应该是：

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

或者

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

这样，您将正确地获得props来自react-router

Answer 2

在 PageEdit.js 上，

您应该使用 useLocation() 访问状态

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

您将能够访问您的数据