reactjs - Typescript React - 与类型“IntrinsicAttributes”没有共同的属性

Question

学习打字稿并尝试将我的其他反应项目之一转换为打字稿来学习它。

我的 App.tsx 文件中的路线出现错误 -Type '{ history: History<unknown>; location: Location<unknown>; match: match<any>; staticContext?: StaticContext | undefined; }' has no properties in common with type 'IntrinsicAttributes'.

该name道具也引发了打字稿错误，但现在我将其注释掉以一次解决一个问题。这是我的 App.tsx。

import React from "react";
import Toaster from "./reusable/Toaster.js";
import { HashRouter, Route, Switch } from "react-router-dom";
import { SocketContext, socket } from "./SocketContext";
import "./scss/style.scss";

const loading = (
  <div className="pt-3 text-center">
    <div className="sk-spinner sk-spinner-pulse"></div>
  </div>
);
// Containers
const TheLayout = React.lazy(() => import("./containers/TheLayout"));
const Login = React.lazy(() => import("./views/auth/Login.js"));
const Logout = React.lazy(() => import("./views/auth/Logout.js"));
const Register = React.lazy(() => import("./views/auth/Register.js"));
const Activate = React.lazy(() => import("./views/auth/Activate.js"));
const ResetPass = React.lazy(() => import("./views/auth/ResetPass.js"));
const Page404 = React.lazy(() => import("./views/page404/Page404"));

const App = () => {
  return (
    <HashRouter>
      <Toaster />
      <React.Suspense fallback={loading}>
        <SocketContext.Provider value={socket}>
          <Switch>
            <Route
              path="/reset-password"
              // name="Reset Password"
              render={(props) => <ResetPass {...props} />}
            />
            <Route
              path="/logout"
              // name="Logout"
              render={(props) => <Logout {...props} />}
            />
            <Route
              path="/activate"
              // name="Activate"
              render={(props) => <Activate {...props} />}
            />
            <Route
              path="/register"
              // name="Register"
              render={(props) => <Register {...props} />}
            />
            <Route
              path="/login"
              // name="Login"
              render={(props) => <Login {...props} />}
            />
            <Route
              path="/404"
              // name="Not Found!"
              render={(props) => <Page404 {...props} />}
            />
            <Route
              path="/"
              // name="Home"
              render={(props) => <TheLayout {...props} />}
            />
          </Switch>
        </SocketContext.Provider>
      </React.Suspense>
    </HashRouter>
  );
};

export default App;

标签： reactjstypescriptreact-router-dom

Answer 1

这是一个疯狂的猜测，但是 react-router 将有关位置和历史的道具传递给您的组件（通过 render-props 调用），但它们没有声明它接受这些属性，因此 Typescript 告诉您尝试将 react-router 形状的道具推入没有它们的组件中会失败。