Estoy usando react-router-dom v6.0.0-beta.0 con react-redux 7.2.2 y quiero editar el valor del estado usando el gancho useState, pero cuando hago clic en EditIcon me da este error...
(0, _reactRouterDom.useHistory) no es una función
EditTodo.js
import React, { useState } from "react"; import { useDispatch, useSelector } from "react-redux"; import { useHistory } from "react-router-dom"; import { useParams } from "react-router-dom"; import { todoUpdated } from "./TodoSlice"; export const EditTodo = () => { const { todoId } = useParams(); const todo = useSelector((state) => state.todo.find((todo) => todo.id === todoId) ); const [name, setName] = useState(); const [description, setDescription] = useState(); const dispatch = useDispatch(); const history = useHistory(); const onTitleChanged = (e) => setName(e.target.value); const onContentChanged = (e) => setDescription(e.target.value); const onSavePostClicked = () => { if (name && description) { dispatch(todoUpdated({ id: todoId, name, description })); history.push(`/todo/${todoId}`); } }; return todo ? ( <section> <h2>Edit Post</h2> <form> <label htmlFor="postTitle">Post Title:</label> <input type="text" id="postTitle" name="postTitle" placeholder="What's on your mind?" value={name} onChange={onTitleChanged} /> <label htmlFor="postContent">Content:</label> <textarea id="postContent" name="postContent" value={description} onChange={onContentChanged} /> </form> <button type="button" onClick={onSavePostClicked}> Save Post </button> </section> ) : null; };¿Cómo arreglar este problema? si alguien sabe que me ayude a resolver esto. gracias aqui estan los codigos y caja
Está utilizando la versión beta de react-router-dom. En v6, useHistory se reemplaza por useNavigate
https://dev.to/zenveus/routing-with-react-router-v6-6b1
Si desea utilizar useHistory, debe instalar v5 en su lugar.
const navigate = useNavigate(); const onSavePostClicked = () => { if (name && description) { dispatch(todoUpdated({ id: todoId, name, description })); navigate(`/todo/${todoId}`); } };Para React Router Versión 6 , use "useNavigate" en lugar de "useHistory", que es React Router Versión 5 .
Así que reemplace estas líneas de código ( React Router Version 5 ):
import { useHistory } from "react-router-dom"; const history = useHistory(); history.push(`/todo/${todoId}`);Con estas líneas de código ( React Router Version 6 ):
import { useNavigate } from "react-router-dom" const navigate = useNavigate(); navigate(`/todo/${todoId}`); // Don't need "push()"Además, para "push()" , estos códigos son equivalentes :
history.push(`/todo/${todoId}`); // React Router Version 5 // equivalent navigate(`/todo/${todoId}`); // React Router Version 6Y para "replace()" , estos códigos son equivalentes :
history.replace(`/todo/${todoId}`); // React Router Version 5 // equivalent navigate(`/todo/${todoId}`, { replace: true }); // React Router Version 6Y para "goBack()" , estos códigos son equivalentes :
history.goBack(); // React Router Version 5 // equivalent navigate(-1); // React Router Version 6Puede deberse al hecho de que está utilizando react-router-dom V6. en V6 se utiliza useNavigate en lugar de useHistory.
Paso 1: desinstale react-router-dom: npm desinstale react-router-dom.
Paso 2: instale v5.3: npm install react-router-dom@5.3.0
Estás listo para irte ahora.