如何通过react router link将状态数据传递到另一个网页？

Question

我正在构建一个基于 react/django 的问题跟踪器应用程序。我正在尝试将项目（一个项目对象数组的状态变量）传递给 manageusers，以便我可以访问 manageusers 中的项目名称。这背后的原因是，我可以使用该项目名称来查找与其关联的项目，并将用户分配给该项目。我正在使用状态对象将项目传递给 link，但是当我尝试加载 manageusers 网页时，它指出状态未定义。请记住，来自 django 后端的项目数据正常，我只是想将该数据发送到 manageusers。

项目

project.js

import { useState, useEffect } from "react";
import { Grid, TextField, Button, Typography } from "@material-ui/core";
import {
    BrowserRouter as Router,
    Link,
    Route,
    Switch,
  } from 'react-router-dom';

const project = () => {
  const [name, setName] = useState();
  const [description, setDescription] = useState();
  const [projects, setProjects] = useState([]);

  const post = () => {
    const requestOptions = {
      method: "POST",
      headers: { "Content-Type": "application/json"},
      body: JSON.stringify({
        name: name,  
        description: description,
      }),
    };
    fetch("/api/newProject",requestOptions)
      .then((response) => response.json())
      .then((data) =>{
       
      })
  }

  useEffect(() => {
    fetch("/api/manageprojects")
    .then((response) => response.json())
    .then((data) =>{
        setProjects(data)
    })
  }, [])

      return (
        <div>
          <body>
              <form action="#" method="POST">
                <TextField onChange={(e) => setName(e.target.value)}> </TextField>
                <br>
                </br>
                <TextField onChange={(e) => setDescription(e.target.value)}> </TextField>
                <br>
                </br>
                <Button onClick={() => post()}> Create New Project </Button>
              </form>
          </body>
          <div>
                {projects && projects.map(project => (
                    <Grid item xs={3}>
                        <Typography component="h5" variant="h5">
                            <h5> {project.name} </h5>
                            <h5> {project.description} </h5>
                        </Typography>
                    </Grid>
                ))}
          </div>
          <Link to={{
            pathname: '/manageusers',
            state: { 
                projects: projects
            }
          }}>Manage Users
          </Link>
        </div>
      );
  }
 


export default project;

管理用户

manageusers.js

的一部分

const Name = (props) => {
    const {projects} = props.location.state;
    console.log(projects.name);
}   
      return (
          <div>
            <Select 
                value={selectedValue}
                options={roles}
                onChange={handleChange}
                isOptionDisabled={option => option.isDisabled}
            />
            <div class="ex1">
                {role && role.map(roles => (
                        <Grid item xs={3}>
                            <Typography component="h5" variant="h5">
                                <h5> {roles.username} </h5>
                            </Typography>
                        </Grid>
                ))}
            </div>
            <Name/>
        </div>

Answer 1

而不是使用 React Router link,

你需要的是全局存储，比如 Redux 或 Mobx。这样您就可以使用相关数据更新状态并在新页面上检索它们。

如果您需要解决方法，可以使用 history.pushState()

基本上你可以推送到你的位置和状态。

在下一页（本例中为 MyComp）上，您可以使用 history.state 检索推送的数据。

如何通过react router link将状态数据传递到另一个网页？

How to pass state data to another webpage through react router link?

reactjs

react-router

react-router-dom

react-props

react-component