react-router-dom v6传history属性报不存在于IntrinsicAttributes类型错误如何解决

报错原因 #

react-router-dom v6 对底层Router组件的属性定义做了破坏性调整，移除了v5版本支持的history属性，因此直接给Router组件传入history参数会触发类型不匹配报错。

修复方案 #

你可以通过拆分history对象属性传入的方式兼容自定义history的用法，修改后的代码如下：

1. index.tsx 调整代码 #

import React, { useState, useEffect } from "react";
import ReactDOM from "react-dom";
import "./index.css";
import App from "./App";
import { Router } from "react-router-dom";
import history from "../src/utils/history";

const Root = () => {
  // 监听history变化同步路由状态，保证路由变化时组件正常更新
  const [routeState, setRouteState] = useState({
    location: history.location,
    action: history.action,
  });

  useEffect(() => {
    return history.listen(setRouteState);
  }, [history]);

  return (
    <Router
      location={routeState.location}
      action={routeState.action}
      navigator={history}
    >
      <App />
    </Router>
  );
};

ReactDOM.render(<Root />, document.getElementById("root"));

2. 保留原有history.tsx代码即可，无需修改。 #

替代方案 #

如果你没有强制自定义history的需求，可以直接使用v6内置的BrowserRouter组件，无需手动创建history对象，代码更简洁：

import React from "react";
import ReactDOM from "react-dom";
import "./index.css";
import App from "./App";
import { BrowserRouter } from "react-router-dom";

ReactDOM.render(
  <BrowserRouter>
    <App />
  </BrowserRouter>,
  document.getElementById("root")
);

内容的提问来源于stack exchange，提问作者murari_sabavath