为什么我无法通过链接组件访问状态？

Question

我尝试对此代码片段进行大量的小更改（额外的大括号，将链接组件代码中的“：”更改为“=”，但我正在尝试的 ReportEdit 组件上的 location.state 仍然为 null将状态传递给。这在 React Router Dom 6.2.1 中不是可能的吗？

这是代码

组件绘制链接

<Link 
  to={`/report/${report.id}/edit`}
  state={{hi: "hi"}}>
 <Button>
    Edit
 </Button>
</Link>

我想要将状态传递给的链接组件

import { Form, Button } from 'react-bootstrap'
import { Link, useParams, useLocation } from 'react-router-dom'
import axios from 'axios';

const ReportEdit = props => {

  const [report, setReport] = useState([]);
  const [ rep_type, setRepType ] = useState(report.rep_type);
  const [ rep_count, setRepCount ] = useState(report.rep_count);

  let params = useParams()
  const location = useLocation()

  console.log(location.state) // <--- always 'null'

  const id = params.id

  //async function handleSubmit() {
    //let data = await axios.put(`http://localhost:3001/reports/${id}`)
   // if (data) {
     // console.log(data.data.report)
    //}
  //}

  return (
    <div>
      <Form onSubmit={e => handleSubmit(e)}>
        <Form.Group className="mb-1" controlId="rep_type">
          <Form.Control 
            type="text" 
            placeholder={props.rep_type}
            name="rep_type"
            value={rep_type}
            onChange={e => setRepType(e.target.value)} 
          />
        </Form.Group>

        <Form.Group className="mb-1" controlId="rep_count">
          <Form.Control 
            type="number" 
            placeholder={props.rep_count} 
            name="rep_count"
            value={rep_count} 
            onChange={e => setRepCount(e.target.value)} 
          />
        </Form.Group>
      <Button variant="primary" type="submit">Submit</Button>
    </Form>
  </div>
  )
}

export default ReportEdit;

Answer 1

可以参考官方的react-router-dom文档，可以通过object来传递params，例如：

<Link
  to={{
    pathname: `/report/${report.id}/edit`,
    state: { id: report.id }
  }}
/>

Answer 2

我明白了。

我只是在开发中刷新目标页面，并且我需要实际使用链接通过状态传递道具。妈的。

Answer 3

我遇到了同样的问题，但就我而言，它没有重新渲染页面，问题是如果你这样写链接：

<Link to={{pathname: "/buynow/packages", state: {showMarker}}}>

由于某种原因它不发送状态，但如果我这样写：

<Link to={{pathname: "/buynow/packages", state: {showMarker}}}>

它发送状态。我正在使用 React Router v6，所以我不太明白为什么它会这样工作。在这方面浪费了时间 >:(