使用 Typescript 未定义 React Router 匹配

Question

我正在使用 react 和 TypeScript 做一个简单的电子商务 PoC。问题是我无法将道具传递给产品详细信息页面，也无法访问包含params 的match

我的路线页面中有以下内容

const Routes = () => (
    <Router>
        <Switch>
            <Route path="/" exact component={require("../pages/home").default} />
            <Route path="/shop" exact component={require("../pages/shop").default} />
            <Route path="/shop/:name" component={require("../pages/shop/details").default} />
        </Switch>
    </Router>
)

在商店页面我这样称呼Link：

<Link to={`/shop/${product.name}`}> 
  <Card 
  ... // A card with product info
   </Card>
 </Link>

最后是details：

import React from 'react';
import { match } from 'react-router-dom';
import MainLayout from '../../layout/mainLayout';
import './shop.css';

interface IProduct {
  name: string
}

export const ProductDetail = (matched: match<IProduct>) => {
  console.log(matched); // Undefined

  return (
    <>
    </>
  )
};


export default MainLayout(ProductDetail);

我想访问产品的名称以获取它的所有信息，我应该可以使用match.params.name，但它未定义。

我已经尝试过这个选项 https://medium.com/@bopaiahmd.mca/how-to-pass-props-using-link-and-navlink-in-react-router-v4-75dc1d9507b4 https://www.pluralsight.com/guides/react-router-typescript

Answer 1

我觉得你需要withRouter HOC

interface ProductDetailProps {
  match: {
    params: {
      name: string
    }
  }
}

export const ProductDetail: React.FC<RouteComponentProps<ProductDetailProps>> = withRouter(({match: {params: {name} = {}} = {}} = {}) => {
  console.log(name); 

  return (
    <>
    </>
  )
});