Question

你好，我刚刚创建了一个组件，在该组件中我获得了一个产品，并且我具有描述值，例如每个产品都有一个代码，页面url为/ products我该如何用

/ product / category/codproduct

和其他参数，产品代码将始终保持不变

我可以使用redux做到吗？

    <Router>
      <Route exact path='/' component={Home} />
      <Route path='/product/(category/codproduct)' component={description} />
      <Route path='/settings' component={Settings} />
    </Router >

Answer 1

您可以发送带有React路由器的道具，例如产品ID，在您的产品页面中进行api调用以获取产品数据

let {productId, category} = ths.state
    <Route
      path='/dashboard'
      component={() => <ProductPage productId={product} category={category/>}
    />

Answer 2

在您的路线中定义参数

      <Router>
          <Route exact path='/' component={Home} />
          <Route path='/product/:category/:codproduct' component={description} />
          <Route path='/settings' component={Settings} />
        </div>
      </Router>

然后按如下所述在说明组件中使用它

const description = (props) => {
const {category, codproduct} = props.match.params

return(...)
}

export default withRouter(description)

Answer 3

    <Router>
      <Switch>
        <Route exact path='/' component={Home} />
        <Route path='/product/:category/:codproduct' render={(props) => {
          <Description category={props.match.params.category} codproduct={props.match.params.codproduct} />
        }} />
        <Route path='/settings' component={Settings} />
      </Switch>
    </Router >

您将获得道具中的道具

import {Switch} from 'react-router-dom'

如果您匹配的是确切网址

this.props.category and this.props.codproduct

反应路由器发送带有参数的URL

3 个答案: