类型“IntrinsicAttributes”上不存在属性“历史”答案

【问题标题】：Property 'history' does not exist on type 'IntrinsicAttributes类型“IntrinsicAttributes”上不存在属性“历史”
【发布时间】：2025-12-18 03:50:02
【问题描述】：

我通过传递 createBrowserHistory 道具将反应应用程序包装在路由器中。但是在类型'IntrinsicAttributes & RouterPops'上不存在“属性'历史'”

这是我的 index.tsx

import React 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";

ReactDOM.render(
    <Router history={history}>
    <App />
  </Router>,
  document.getElementById("root")
);

这是我的 history.tsx

import { createBrowserHistory } from "history";

const history = createBrowserHistory();

export default history;

我正在使用 react-router-dom v6.0.2

【问题讨论】：

Router 组件在 v6.x 中不再采用 history 对象。您现在还应该使用更高级别的路由器之一，即BrowserRouter 等。
你能提供任何文章的链接来解决这个问题吗
你想用“历史”做什么？这个答案有帮助吗？ *.com/a/69869828/8690857
如果用户未登录，我正在使用 axios 拦截器中的历史记录将用户重定向到登录页面

标签： reactjs react-router-dom browser-history

【解决方案1】：

我怀疑您可以实现更高级别路由器之一的更多逻辑，并使用自定义历史对象获得您想要的行为。

BrowserRouter 实现例如：

export function BrowserRouter({
  basename,
  children,
  window
}: BrowserRouterProps) {
  let historyRef = React.useRef<BrowserHistory>();
  if (historyRef.current == null) {
    historyRef.current = createBrowserHistory({ window });
  }

  let history = historyRef.current;
  let [state, setState] = React.useState({
    action: history.action,
    location: history.location
  });

  React.useLayoutEffect(() => history.listen(setState), [history]);

  return (
    <Router
      basename={basename}
      children={children}
      location={state.location}
      navigationType={state.action}
      navigator={history}
    />
  );
}

创建一个使用自定义history 对象并管理状态的CustomRouter：

const CustomRouter = ({ history, ...props }) => {
  const [state, setState] = useState({
    action: history.action,
    location: history.location
  });

  useLayoutEffect(() => history.listen(setState), [history]);

  return (
    <Router
      {...props}
      location={state.location}
      navigationType={state.action}
      navigator={history}
    />
  );
};

【讨论】：