(0 , _reactRouterDom.useHistory) 不是函数答案

【问题标题】：(0 , _reactRouterDom.useHistory) is not a function(0 , _reactRouterDom.useHistory) 不是函数
【发布时间】：2022-02-18 07:55:33
【问题描述】：

我正在将 react-router-dom v6.0.0-beta.0 与 reac-redux 7.2.2 一起使用，并且想通过使用 useState 挂钩来编辑状态值，但是当我单击 EditIcon 时，它给了我这个错误...

(0 , _reactRouterDom.useHistory) 不是函数

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;
};

如何解决这个问题？如果有人知道帮助我解决这个问题。谢谢这是codesandbox

【问题讨论】：

标签： javascript node.js reactjs react-router react-router-dom

【解决方案1】：

您正在使用 react-router-dom 的 beta 版本。在 v6 中，useHistory 被替换为 useNavigate

https://dev.to/zenveus/routing-with-react-router-v6-6b1

如果你想使用 useHistory，你应该安装 v5。

const navigate = useNavigate();

const onSavePostClicked = () => {
  if (name && description) {
    dispatch(todoUpdated({ id: todoId, name, description }));
    navigate(`/todo/${todoId}`);
  }
};

【讨论】：

const onSavePostClicked = () => { if (name && description) { dispatch(todoUpdated({ id: todoId, name, description })); history.push(`/todo/${todoId}`); } }; 我将如何在 useNavugate 上使用数组方法
因为编辑后的值会被推回商店
@sultan 我在答案中添加了一个代码示例。

【解决方案2】：

这可能是因为您使用的是 react-router-dom V6。在 V6 中使用 useNavigate 而不是 useHistory。

第 1 步：卸载 react-router-dom： npm 卸载 react-router-dom。

第 2 步：安装 v5.3： npm install react-router-dom@5.3.0

你现在可以走了。

【讨论】：