时间戳

首页 > 解决方案 > 使用 Typescript 未定义 React Router 匹配

reactjs - 使用 Typescript 未定义 React Router 匹配

问题描述

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

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

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>
)

在 Shop 页面中，我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

标签： reactjstypescriptreact-router

解决方案

我认为你需要withRouter HOC

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

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

  return (
    <>
    </>
  )
});

推荐阅读