时间戳

首页 > 解决方案 > 类型“{}”缺少来自“匹配”类型的以下属性'：参数、isExact、路径、url

javascript - 类型“{}”缺少来自“匹配”类型的以下属性'：参数、isExact、路径、url

问题描述

我正在使用反应路由器和打字稿从路由中获取 id 变量以在组件中使用，打字稿抱怨说：

类型“{}”缺少“匹配”类型的以下属性：参数、isExact、路径、url

这是我的代码（App.tsx）：

<Route path='/posts/:id'>
  <Post />
</Route>

Post.tsx：

import React from 'react';
import { match } from 'react-router';

interface Identifiable {
  id: string
  params: string,
  isExact: string,
  path: string,
  url: string,
}

const Post = (mathedRoute: match<Identifiable>) => {
  return <h1>{mathedRoute.params.id}</h1>
}

export default Post;

在此先感谢您的帮助。

标签： javascriptreactjstypescript

解决方案

您可以使用标准方式：

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

interface PostParams {
    id: string;
}

function Post(props: RouteComponentProps<PostParams>) {
    return <>{props.match.params.id}</>;
}

export function App() {
    return (
        <Switch>
            <Route path='/posts/:id' component={Post}/>
        </Switch>
    );
}

或挂钩方式：

import React from 'react';
import { Route, Switch, useParams } from 'react-router-dom';

interface PostParams {
    id: string;
}

function Post() {
    const { id } = useParams<PostParams>();
    return <>{id}</>;
}

export function App() {
    return (
        <Switch>
            <Route path='/posts/:id'>
                <Post/>
            </Route>
        </Switch>
    );
}

在您的代码中，您试图将它们混合在一起。
芦苇更多关于反应路由器v5

推荐阅读