history.push（）和props.location.state导致“无法读取未定义的属性'state'”

Question

问题描述

我正在将react-router-dom与react功能组件一起使用。我正在尝试使用“ history.push”传递数据，但无法正常工作。

使用“ history.push”本身重定向到另一个页面的效果很好。 但是问题是：通过“状态：{...}”将数据传递给组件会导致：     “无法读取未定义的属性'状态' 当我尝试通过组件内的“ props.location.state”访问它时。

我尝试了各种定义路线的方法。

代码

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>
    );
}

我尝试过的事情：

1. 使用useEffect（）避免重新加载页面时出现任何问题：

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

1. 其他类型的路线定义

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

1. 添加位置道具：

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

1. 将道具传递给组件（即使应由React Router自动包含）：

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

什么都没做

我希望console.log（...）的输出是通过history.push传递的数据。考虑应该以这种方式工作的React Router文档。

有人可以帮忙吗？

Answer 1

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

它应该是：

join_df=df.copy() join_df['count']=df.groupby(['User_Name','Disposition_Code'])['User_Name'].transform('size')

或

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

这样，您将正确地获得<Route exact path="/" render={props => <PageList {...props}> />的{​​{1}}

Answer 2

网址参数

您应该定义URL以接受ID url parameter。

Traceback (most recent call last):
  File "/home/pi/Python/Text story adventure.py", line 79, in <module>
    intro()
  File "/home/pi/Python/Text story adventure.py", line 39, in intro
    option_lookaround()
  File "/home/pi/Python/Text story adventure.py", line 61, in option_lookaround
    option_statue()
  File "/home/pi/Python/Text story adventure.py", line 76, in option_statue
    print("You now have" ,hp, "health points")
UnboundLocalError: local variable 'print' referenced before assignment

因此，您可以重定向到正确的位置，甚至复制过去的URL与其中的页面ID共享。

在<Route path="/edit/:id" component={PageEdit} /> 组件中，您可以使用<pageEdit />访问ID，然后从页面列表中加载ID。

组件之间的共享状态

更复杂的解决方案可能是在所有组件之间采用共享状态，这就是redux所设计的。

Answer 3

在PageEdit.js上，

您应该使用useLocation（）来访问状态

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

您将能够访问您的数据