TypeScript React 中的可重用布局组件：“IntrinsicAttributes & IProps”类型上不存在属性“路径”答案

【问题标题】：Reusable layout component in TypeScript React: Property 'path' does not exist on type 'IntrinsicAttributes & IProps'TypeScript React 中的可重用布局组件：“IntrinsicAttributes & IProps”类型上不存在属性“路径”
【发布时间】：2021-05-07 19:41:50
【问题描述】：

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

我尝试为我的布局组件创建一个自定义 Route，其 props 扩展 RouteComponentProps 和 Route，但在这两种情况下我都会收到以下错误：

Property 'path' does not exist on type 'IntrinsicAttributes & IProps'. TS2322

我猜这是因为 TypeScript 无法识别我的自定义 Route 与 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;

App.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();

【问题讨论】：

标签： reactjs typescript react-router

【解决方案1】：

问题是由于扩展了错误的接口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>
        )} />
    )
}

【讨论】：