如何使用 useHistory 将状态传递给另一个组件？

Question

我需要将状态从 useState 挂钩传递到另一个组件，但它们之间的唯一连接是一个具有 onClick 历史记录函数的按钮。推（路线）。

\n

表页面（从该页面我必须将状态发送到下面的 TableMore 页面）

\n

import React, { useState, useEffect } from "react";\nimport { useTable, usePagination } from "react-table";\nimport { useHistory } from "react-router-dom";\nimport styled from "styled-components";\nimport apiRequest from "helpers/apiRequest";\nimport Header from "../../../components/Header/Header";\n\nfunction Table({ columns, data, searchData, setsearchData, getData }) {\n  // Use the state and functions returned from useTable to build your UI\n  const {\n    getTableProps,\n    getTableBodyProps,\n    headerGroups,\n    prepareRow,\n    page, // Instead of using 'rows', we'll use page,\n    // which has only the rows for the active page\n\n    // The rest of these things are super handy, too ;)\n    canPreviousPage,\n    canNextPage,\n    nextPage,\n    previousPage,\n    rows,\n  } = useTable(\n    {\n      columns,\n      data,\n      searchData,\n      setsearchData,\n      getData,\n      initialState: { pageIndex: 0 },\n    },\n    usePagination\n  );\n\n  // Render the UI for your table\n  return (\n    <>\n      <div className="inputs">\n        <Input\n          type="text"\n          placeholder="Unesi ime "\n          onChange={(e) =>\n            setsearchData({ ...searchData, ime: e.target.value })\n          }\n          onKeyPress={(e) => (e.key === "Enter" ? getData() : null)}\n        />\n        <Input\n          type="text"\n          placeholder="Unesi ime oca "\n          onChange={(e) =>\n            setsearchData({ ...searchData, imeOca: e.target.value })\n          }\n          onKeyPress={(e) => (e.key === "Enter" ? getData() : null)}\n        />\n        <Input\n          type="text"\n          placeholder="Unesi prezime "\n          onChange={(e) =>\n            setsearchData({ ...searchData, prezime: e.target.value })\n          }\n          onKeyPress={(e) => (e.key === "Enter" ? getData() : null)}\n        />\n        <Button onClick={() => getData()}>Pretra\xc5\xbei</Button>\n      </div>\n      <table {...getTableProps()}>\n        <thead>\n          {headerGroups.map((headerGroup) => (\n            <tr {...headerGroup.getHeaderGroupProps()}>\n              {headerGroup.headers.map((column) => (\n                <th {...column.getHeaderProps()}>{column.render("Header")}</th>\n              ))}\n            </tr>\n          ))}\n        </thead>\n        <tbody {...getTableBodyProps()}>\n          {page.map((row, i) => {\n            prepareRow(row);\n            return (\n              <tr {...row.getRowProps()}>\n                {row.cells.map((cell) => {\n                  return (\n                    <td {...cell.getCellProps()}>{cell.render("Cell")}</td>\n                  );\n                })}\n              </tr>\n            );\n          })}\n        </tbody>\n      </table>\n\n      <div className="pagination">\n        <span>\n          Prikazuje se\n          <strong>{rows.length} od 8000</strong> rezultata\n        </span>\n        <div className="buttons">\n          <Button onClick={() => previousPage()} disabled={!canPreviousPage}>\n            Prethodna stranica\n          </Button>\n          <Button onClick={() => nextPage()} disabled={!canNextPage}>\n            Sljede\xc4\x87a stranica\n          </Button>\n        </div>\n      </div>\n    </>\n  );\n}\n\nconst TablePage = () => {\n  const [tableData, setTableData] = useState([]);\n  const [searchData, setsearchData] = useState({\n    ime: "",\n    prezime: "",\n    imeOca: "",\n  });\n  const [data, setData] = useState({\n    email: "",\n    password: "",\n  });\n  const [token, setToken] = useState("");\n  const [clicked, setClicked] = useState(false);\n  const [dataId, setdataId] = useState("");\n  const history = useHistory();\n  let success = false;\n  if (token) {\n    success = true;\n  } else {\n    success = false;\n  }\n\n  const getData = async () => {\n    const { ime, prezime, imeOca } = searchData;\n    try {\n      const response = await apiRequest({\n        method: "get",\n        url: `v1/spisak-srebrenica?prezime=${prezime}&ime=${ime}&imeOca=${imeOca}`,\n      });\n      if (response.status === 200) {\n        setTableData(response.data);\n      }\n    } catch (err) {\n      console.log(err);\n    }\n  };\n  const getToken = async () => {\n    await apiRequest({\n      method: "post",\n      url: `auth/login`,\n      data,\n    })\n      .then((resp) => {\n        console.log(resp.data);\n        setToken(resp.data.token);\n      })\n      .catch((err) => {\n        console.log(err.response.data);\n      });\n  };\n\n  useEffect(() => {\n    getData();\n  }, []);\n\n  const columns = [\n    {\n      Header: "ID \xc5\xbdRTVE",\n      accessor: "id_grobnog_mjesta",\n    },\n    {\n      Header: "IME (OCA) PREZIME",\n      accessor: "ime_prezime",\n    },\n    {\n      Header: "GODINA RO\xc4\x90ENJA",\n      accessor: "godina_rodjenja",\n    },\n    {\n      Header: "VI\xc5\xa0E",\n      Cell: ({ row }) => (\n        <Button\n          position="table"\n          onClick={() =>\n            history.push(`tablemore/${row.values.id_grobnog_mjesta}`) ||\n            setClicked(!clicked) ||\n            setdataId(row.values.id_grobnog_mjesta)\n          }\n        >\n          vi\xc5\xa1e\n        </Button>\n      ),\n    },\n  ];\n  return (\n    <div>\n      <Header />\n      {success ? (\n        <Styles>\n          <Table\n            columns={columns}\n            data={tableData}\n            searchData={searchData}\n            setsearchData={setsearchData}\n            getData={getData}\n          />\n        </Styles>\n      ) : (\n        <Container>\n          <div className="content">\n            <h1>Prijavite se</h1>\n            <div className="form">\n              <input\n                type="email"\n                placeholder="Unesite email"\n                onChange={(e) => setData({ ...data, email: e.target.value })}\n              />\n              <input\n                type="password"\n                placeholder="Unesite \xc5\xa1ifru"\n                onChange={(e) => setData({ ...data, password: e.target.value })}\n              />\n              <button onClick={getToken}>Prijavi se</button>\n            </div>\n          </div>\n        </Container>\n      )}\n    </div>\n  );\n};\n\nexport default TablePage;\n

\n

可以看到，onClick={() => History.push(tablemore/${row.values.id_grobnog_mjesta} )} 是我调用 tablemore 页面的地方。\n所以我不知道如何将 TOKEN 传递到 table more 页面。

\n

Answer 1

使用react-router-dom v6，您可以将位置状态设置为useNavigate：

import { useNavigate } from "react-router-dom";
...
let navigate = useNavigate();
navigate("/users/123", { state: partialUser });

与react-router-dom v5您可以使用useHistory：

import { useHistory } from "react-router-dom";
...
let history = useHistory();
history.push("/users/123", { state: partialUser });

在下一页上，您可以通过以下方式访问它useLocation：

 import { useLocation } from "react-router-dom";
 ...
 let location = useLocation();
 location.state;