Question

我需要访问子组件的params（例如match.params）。例如：

const Vets = ({ match }) => (
  <div>
    <LeftMenu vetId={match.params.vetId} catId=??? />
    <div>
      <Switch>
        <Route path={`${match.path}/cats/:catId`} component={Cat} />
        <Route path={`${match.path}/dogs/:dogId`} component={Dog} />
      </Switch> 
    </div>
    <RightActionBar /> (<- uses withRouter to get vetId.  Would like to get catId)
  </div>
)

网址：myapp.com/vets/12/cats/194

在Vet组件中，我可以访问match.params并获取在父节点中匹配的URL部分中的任何参数来呈现此组件（例如vetId，但不是catId）。另外，如果我在RightActionBar组件中使用withRouter，我可以得到相同的match.params，但不是CAT或DOG ID。

在Cat and Dog组件中，我可以访问props.match.params并获取上面提供的参数和CAT或DOG ID。

假设我想知道LeftMenu或RightActionBar组件中的cat或dog id。我该如何访问它？

据我所知，这在早期版本中通过props.params是可行的，但不再是。我知道我可以使用位置道具并编写我自己的功能来解决它，但我的应用程序比示例稍微复杂一点，我希望这是一个更优雅的解决方案，我可以使用它。我错过了。

Answer 1

我最终通过创建一个呈现我的LeftMenu和RightActionBar的组件来解决了这个问题：

const Wrapper = ({ animalType , match: { params: { animalId, vetId }}}) => (
  <>
    <LeftMenu animalId={animalId} animalType={animalType} vetId={vetId} />
      {children}
    <RightActionBar vetId={vetId} /> 
  </>
)

然后我使用路由器render而不是component的方法：

const Vets = ({ match }) => (
  <div>
    <Switch>
      <Route 
        path={`${match.path}/cats/:animalId`} 
        render={(props) => (
          <Wrapper animalType={'cat'} {...props}>
            <Cat catId={props.match.params.animalId} />
          </Wrapper>
         )}
      </Route>
      <Route 
        path={`${match.path}/dogs/:animalId`} 
        render={(props) => (
          <Wrapper animalType={'cat'} {...props}>
            <Dog dogId={props.match.params.animalId} />
          </Wrapper>
         )}
      </Route>
    </Switch> 
  </div>
)

我也可以将<Wrapper/>组件添加到<Cat/>的外层，而<Dog/>渲染器却要保留，但我想保持它们干净，以便在没有它的情况下使用其他地方

React Router 4 - 访问子参数

1 个答案: