如何使用反应路由器 dom v6 从 <Route /> 获取道具

Question

当我单击表格的一行时，我正在尝试将:id传递给url 尝试使用navigate("/edit/"+props);和onClick={() => handleClick(data.PacienteId)}但它不起作用，然后使用useParams并创建了handleProceed将其用作onclick={handleProceed}但它仍然不起作用，我只是得到了Apiurl提供的 URL，但/undefined

这就是我的路线

function App() {
return (
<>
<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>
</>
);
}

这是我的仪表板，我想在其中将 id 传递给 url 单击表格

export const Dashboard = (props) => {
const [paciente, setPaciente] = useState([]);
const {id}=useParams();
const navigate = useNavigate();
useEffect(() => {
let url = `${Apiurl}pacientes?page=1`;
axios.get(url).then((response) => {
setPaciente(response.data);
});
}, []);
const handleClick = (props) => {
/* navigate("/edit/" + props); */
navigate(`/edit/${id}`);
};
const handleProceed = (e) => {
/* history.push(`/edit/${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={handleProceed} */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>
</>
);
};

Answer 1

在句柄单击函数中，您将参数命名为 props，但您尝试在导航方法中使用"id"变量。在导航方法中使用 props 或将参数名称更改为 id。

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

*********或************

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

Answer 2

使用const {id} = useParams();

然后

const handleProceed = (id) => { /* history.push(``/edit/${id}``); */ navigate(``/edit/${id}``); };