对不同路线上的组件使用不同的样式？根据路线隐藏和显示数据

Question

在首页中，我有一个名为 land-card 的组件，在该卡片中我必须显示标题、图像和 2 个图标。但是在另一条路线（/市场）中，我需要显示相同的组件，但它需要有更大的宽度，并且有一个额外的图标和文本。那么我如何在渲染上添加条件，比如哪个页面将采用该减速器数据的哪些部分？

我已经尝试使用之前问题中的路由条件，但没有成功。

      name: 'Plaza',
      months: '4',
      num: '1',
      x: '20',
      y: '-30',
      green: true,
      blue: true,
      manaSymbol: true,
      mana: '20,000',
    },```

This is the reducer file for that card data. I only need to show everything other than manaSymbol and mana on first page which already works, but without creating new component how can I make it show manaSymbol and mana on (/marketplace)?

Answer 1

您可以为第一条路线传递一个 className 和道具，例如。 "card-style1" 第二条路线 "card-style2" 在组件中你可以写

(this.) 仅当它是 class 组件时仅在函数组件的情况下 props.PROPNAME

对不同路线上的组件使用不同的样式？根据路线隐藏和显示数据

Use different styles for a component on different routes? Hide and Show data according to routes

css

routing

reactjs

react-redux