如何使用 react router v6 重用以前用于导航到 url 的道具

Question

我有这条路线 <Route path="/edit/:id" exact element={<Editar />} />，我可以从 <Dashboard> 重定向。我没有任何重定向到 /edit/idClickedOnDashboard 的错误但是一旦我重定向到 <Editar> 我想重用这个 idClickedOnDashboard （使 url 调用 API）使用props.match.params.id 但错误提示 props.match 未定义

路线：

<BrowserRouter>
        <Routes>
          <Route path="/" exact element={<Login  />} />
          <Route path="/dashboard" exact element={<Dashboard  />} />
          <Route path="/new" exact element={<Nuevo  />} />
          <Route path="/edit/:id" exact element={<Editar />} />
        </Routes>
      </BrowserRouter>

在仪表板上

export const Dashboard = (props) => {
  const [paciente, setPaciente] = useState([]);
  const navigate = useNavigate();
  useEffect(() => {
    let url = `${Apiurl}pacientes?page=1`;
    axios.get(url).then((response) => {
      setPaciente(response.data);
    });
  }, []);

  const handleClick = (id) => {
    navigate(`/edit/${id}`);
  };

  return (
    <>
      <Header />
      <div className="container">
        <table className="table table-dark table-hover">
          <thead>
            <tr>
              <th scope="col">ID</th>
              <th scope="col">DNI</th>
              <th scope="col">NOMBRE</th>
              <th scope="col">TELEFONO</th>
              <th scope="col">CORREO</th>
            </tr>
          </thead>
          <tbody>
            {paciente.map((data, i) => {
              return (
                <tr key={i} onClick={() => handleClick(data.PacienteId)}>
                  <td>{data.PacienteId}</td>
                  <td>{data.DNI}</td>
                  <td>{data.Nombre}</td>
                  <td>{data.Telefono}</td>
                  <td>{data.Correo}</td>
                </tr>
              );
            })}
          </tbody>
        </table>
      </div>
    </>
  );
};

终于出现错误了Editar.jsx

import React, { useEffect } from "react";
import { useParams } from "react-router-dom";

import { Apiurl } from "../services/api";

export const Editar = (props) => {
  //const { id } = useParams();
  useEffect(() => {
    let pacienteId = props.match.params.id;
    let url =`${Apiurl}pacientes?id=${pacienteId}`;
    console.log(url);
  }, []);





  return <div>Editar</div>;
};

错误

Answer 1

必须使用useParams获取id

import React, { useEffect } from "react";
import { useParams } from "react-router-dom";

import { Apiurl } from "../services/api";

export const Editar = (props) => {
  let params = useParams();
  useEffect(() => {
    let pacienteId = params.id.match(/\d+/);
    let url =`${Apiurl}pacientes?id=${pacienteId}`;
    console.log(url);
  }, []);





  return <div>Editar</div>;
};

如何使用 react router v6 重用以前用于导航到 url 的道具

How to reuse props used previously to navigate to url using react router v6

javascript

reactjs

react-router

react-router-dom