Question

我有一个看起来像这样的React Router：

<Switch>
  <Route exact path="/" render={() => <DashboardView {...dashboardViewProps} />} />
  <Route path="/blocks" render={() => <BlocksView {...blocksViewProps} />} />
  <Route path="/chaincodes" render={() => <ChaincodeView {...chaincodeViewProps} />} />
  <Route path="/channels" render={() => <ChannelsView {...channelsViewProps} />} />
  <Route path="/network" render={() => <NetworkView  {...networkViewProps} />} />
</Switch>

我想这样添加新路线：

<Route path="/transactions/:txId" render={() => <TransactionsView {...transactionsViewProps} />} />

如何将txId传递给现在看起来像这样的TransactionView构造函数：

constructor(props) {
    super(props);
}

谢谢

Answer 1

txId通过路由器道具可用于路由器组件，并且当通过render props渲染组件时，需要将路由器道具传递给组件

<Route path="/transactions/:txId" render={(routerProps) => <TransactionsView {...transactionsViewProps} {...routerProps}/>} />

然后在组件中就可以得到它

constructor(props) {
    super(props);
    this.txId = props.match.params.txId
}

如何将URL参数传递给ReactJS中的呈现函数

1 个答案: