使用 TypeScript 响应路由器最佳实践

如何解决使用 TypeScript 响应路由器最佳实践

我有一个简单的 React 应用，有 2 个视图、列表和详细信息，它是用 TypeScript 编写的。

我偶然发现了一些问题/争议，想在这里询问最佳做法：

第一期：

<Router>
    <Switch>
        <Route exact path="/"><ProductsList /></Route>
        <Route exact path="/:id"><ProductDetails /></Route>
    </Switch>
</Router>

上面是我在 App.tsx 中的开关，问题是 ProductDetails 需要 Product 类型的道具：const ProductDetails = (props: Product) => {...，每当我在没有道具的情况下定义它时，我都会收到此错误：Type '{}' is missing the following properties from type 'Product': id

我可以在我的路由 (<Route exact path="/:id" component={ProductDetails} />) 中使用组件 prop，但我想使用 react-router v5 中推荐的方式。

第二期：

在我的 ProductsList 中，我使用这种方法将数据从列表传递到详细信息：

<Link to={{
    pathname: `/${product.id}`,state: product
}}>

是否有另一种方法可以将数据从父级传递给子级，因为使用这种方式我需要从像这样的道具中提取所需的数据：const product: Product = props.location.state，如果有更多的 TypeScript 方式，我更喜欢。

>

提前致谢！