打字稿不会在 react-router-dom 上呈现动态 url

Question

我有组件 YachtDetails：

import React from "react";
import {RouteComponentProps} from "react-router-dom";

interface Props extends RouteComponentProps<{id:string}> {}

const YachtDetails:React.FC<Props> = ({match}) => {
    return ()

我在 YachtingDetails 中的 App.tsx 上出现错误：

function App() {
    const [show, toggle] = useToggler();


    return (

        <div style={{height: '100%', backgroundColor:'#fff5f5'}}>
            <Toolbar toggle={toggle}/>
            <Drawer show={show} toggle={toggle}/>
            <Backdrop/>
            <main style={{marginTop: '56px'}}>
                <Switch>
                    <Route exact path="/yachts-for-rent/:id">
                        <YachtDetails/> *iget error Type '{}' is missing the following properties from type 'Props': history, location, match
                    </Route>
                </Switch>
            </main>
            <Footer/>
        </div>

    );
}

export default App;

我是初学者，正在尝试创建一个动态 url 并从 json 文件中获取信息。

Answer 1

由于您使用的是打字稿，因此您是在告诉程序组件YachtDetails 必须具有某些属性，否则会引发错误。

这些属性就是这些

interface Props extends RouteComponentProps<{id:string}> {}

所以为了让您的代码能够编译，它应该是：

  const history = useHistory();
  const location = useLocation();
  const match = useRouteMatch();

<YachtDetails history={history} location={location} match={match}/>

如果你只需要match属性，那么你不一定需要扩展RouteComponentProps，你可以这样做：

interface Props {
  match: any
}