属性“history”在类型“IntrinsicAttributes”上不存在。

Question

我正在使用Router包装React应用程序，并传递createBrowserHistory属性。但是遇到了"IntrinsicAttributes & RouterPops类型没有'history'属性"的问题。

这是我的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 版本。

- murari_sabavath

---

在v6.x中，Router组件不再接受history对象。您现在应该使用更高级别的路由器之一，例如BrowserRouter等。 - Drew Reese

你能提供一篇文章的链接来解决这个问题吗？ - murari_sabavath

你想用“history”做什么？这个答案有帮助吗？ https://dev59.com/MmsMtIcB2Jgan1znw4bt#69869828 - Drew Reese

我正在使用 axios 拦截器中的历史记录，如果用户未登录，则将其重定向到登录页面。 - murari_sabavath

Answer 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}
    />
  );
}

创建一个自定义路由器（CustomRouter），它使用自定义的历史记录对象（history）并管理状态：

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

- Drew Reese

Answer 2

2023答案 - React Typescript错误：类型“IntrinsicAttributes”上不存在属性“history”

我遇到的确切TypeScript错误是：

Type '{ children: Element; history: BrowserHistory; }' is not assignable to type 'IntrinsicAttributes & BrowserRouterProps'. Property 'history' does not exist on type 'IntrinsicAttributes & BrowserRouterProps'.

经过多个小时的研究和故障排除，解决此问题的解决方案如下所述。

步骤1-将“history”安装到您的项目依赖项中

npm i history

步骤2 - 从正确的源导入Router和createMemoryHistory

从"react-router-dom"导入BrowserRouter已经过时，从"history"导入{createBrowserHistory}也是如此，因此我们需要像下面这样导入Router和createMemoryHistory...

import { BrowserRouter } from "react-router-dom";
import { createMemoryHistory } from "history";

第三步 - 从createMemoryHistory定义历史记录

const history = createMemoryHistory();

第四步 - 将历史记录属性传递给您的路由器

最后，您将history={history}和navigator={history}传递，如下所示...

<Router history={history} navigator={history}>
 <React.StrictMode>
  <App />
 </React.StrictMode>
</Router>

最终你的整个 "index.tsx" 应该如下所示...

import React from "react";
import ReactDOM from "react-dom/client";
import { BrowserRouter } from "react-router-dom";
import { createMemoryHistory } from "history";
import "./index.css";
import App from "./App";
import * as serviceWorkerRegistration from "./serviceWorkerRegistration";
import reportWebVitals from "./reportWebVitals";

const history = createMemoryHistory();

const root = ReactDOM.createRoot(
    document.getElementById("root") as HTMLElement
);
root.render(
    <BrowserRouter history={history} navigator={history}>
        <React.StrictMode>
            <App />
        </React.StrictMode>
    </BrowserRouter>
);

// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: 
serviceWorkerRegistration.register();

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: 
reportWebVitals();

- Chukwuebuka Nwoba