reactjs - TypeScript React 中可重用的布局组件 : Property 'path' does not exist on type 'IntrinsicAttributes & IProps'

Question

我正在使用 TypeScript React 和 React Router v5 编写一个可重用的全角布局组件。我希望这个组件能够应用于我网站上的多个不相关的页面。

我尝试为我的布局组件创建一个自定义路由，该组件的 props 扩展了 RouteComponentProps 和 Route，但在这两种情况下都出现以下错误:

类型“IntrinsicAttributes & IProps”上不存在属性“path”。 TS2322

我猜这是因为 TypeScript 无法识别我的自定义路由与 React Router 使用的路由不同，因此它找不到 path 属性。

如何让我的布局组件用作路线？

全角布局.tsx:

import React, { Component, ComponentType } from 'react';
import { Route, RouteComponentProps } from 'react-router-dom';

export const FullWidthLayout = ({ children }: any) => (
    <div>
        {children}
    </div>
)

interface IProps extends RouteComponentProps {
    component: ComponentType
}

export const FullWidthLayoutRoute = ({ component, ...rest }: IProps) => {
    return (
        <Route {...rest} render={matchProps => (
            <FullWidthLayout>
                <Component {...matchProps} />
            </FullWidthLayout>
        )} />
    )
}

export default FullWidthLayout;

应用程序.tsx:

import React, { Component } from "react";
import { Switch } from "react-router-dom";
import "./App.scss";
import Breadcrumbs from "./breadcrumbs/breadcrumbs";
import Footer from "./footer/footer";
import { MaintainCart } from "./helpers/maintain-cart";
import Home from "./home";
import { FullWidthLayoutRoute } from "./layouts/full-width-layout";
import Menu from "./menu";
import { CartProvider } from "./shopping-cart/shopping-cart-context";


class App extends Component {
    render() {
        return (
            <CartProvider>
                <div>
                    <Menu />

                    <Breadcrumbs />

                    <MaintainCart />

                    <Switch>
                        <FullWidthLayoutRoute path="/" component={Home} />
                    </Switch>

                    <Footer />
                </div>
            </CartProvider>
        );
    }
}

export default App;

index.tsx:

import React from "react";
import ReactDOM from "react-dom";
import "./index.css";
import "./main.css";
import "./bootstrap.min.css";
import "./responsive.css";
import App from "./App";
import { BrowserRouter as Router } from "react-router-dom";
import * as serviceWorker from "./serviceWorker";
import * as dotenv from 'dotenv'
import ScrollToTop from "./common/scroll-to-top";


dotenv.config()

ReactDOM.render(
  <Router basename='/rap'>
    <ScrollToTop />
    <App />
  </Router>,
  document.getElementById("root")
);

serviceWorker.unregister();

Answer 1

问题是由于扩展了错误的接口(interface)RouteComponentProps。正确的应该是 RouteProps ，以便您的代码应按如下所示进行改进:

import React, { Component, ComponentType } from 'react';
import { Route, RouteProps } from 'react-router-dom';

export const FullWidthLayout = ({ children }: any) => (
  // ...
)

// Replace with `RouteProps`
interface IProps extends RouteProps {
    // should also specify for props here
    // if you have no idea how just leave it as any
    component: ComponentType<any>
}

// Looks like you're using a base component class `Component` in the original code
// so I replace `component` as `Comp` for you
export const FullWidthLayoutRoute = ({ component: Comp, ...rest }: IProps) => {
    return (
        <Route {...rest} render={matchProps => (
            <FullWidthLayout>
                <Comp {...matchProps} />
            </FullWidthLayout>
        )} />
    )
}