试图通过链接传递状态 - React答案

【问题标题】：Trying to pass state through link - React试图通过链接传递状态 - React
【发布时间】：2022-01-08 04:18:56
【问题描述】：

我不明白为什么我不能将状态从组件 ArrayList 传递到 ArrayList2。任何人都可以插话并提供解决问题的方法。我想我已经用尽了关于该主题的所有 SO 线程、YouTube 视频和 Google 搜索，并且不断收到以下错误消息，

“未捕获的 TypeError：无法解构 'location.state' 的属性 'message'，因为它为空。”。

我的代码如下：

组件 1

import "./App.css";
import ArrayList from "./ArrayList";
import { Route, BrowserRouter as Router, Routes } from "react-router-dom";
import ArrayList2 from "./dataFolder/ArrayList2";

function App() {
  return (
    <Router>
      <Routes>
        <Route exact path="*" element={<ArrayList />} />
        <Route exact path="/2" element={<ArrayList2 />} />
      </Routes>
    </Router>
  );
}

export default App;

组件 2

import { Link } from "react-router-dom";
import "./App.css";
import Years from "./dataFolder/Years";
import NavBar from "./NavBar";

function ArrayList() {
  const years = Years;

  return (
    <div className="App">
      <NavBar />
      <nav>
        <ul className="no-bullets">
          {years.map((item) => (
            <Link
              className="no-link-style"
              to={{
                pathname: "/2",
                state: { message: "This is a passed Item" },
              }}
            >
              <li>{item}</li>
            </Link>
          ))}
        </ul>
      </nav>
    </div>
  );
}

export default ArrayList;

组件 3

import React, { useState } from "react";
import { useLocation } from "react-router-dom";
import ArrayList from "../ArrayList";
import NavBar from "../NavBar";

function ArrayList2(props) {
  const types = ["General", "Primary"];

  const location = useLocation();
  const { message } = props.location.state;

  console.log(message)

  return (
    <div className="App">
      <NavBar />
      <ul className="no-bullets">
        {types.map((item) => (
          <li>{item}</li>
        ))}
      </ul>
    </div>
  );
}

export default ArrayList2;

对此的任何帮助将不胜感激。

【问题讨论】：

试试const { message } = location.state
在codesandbox.io添加样本

标签： reactjs hyperlink state

【解决方案1】：

正如我从第一个代码块中看到的，您没有将任何道具传递给 ArrayList 组件，而是将其传递给 Link 道具。如果不将道具传递给 ArrayList 组件，您将尝试访问它。这会导致 undefined 值的解构。您可以使用 react-router 包中定义的 useParams 挂钩来使用传递的路由参数。

【讨论】：