How to pass URL params to render function in ReactJS

Question

I have React Router that looks like this:

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

I want to add new route like this:

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

How could I pass the txId to the TransactionView constructor which now looks like this:

constructor(props) {
    super(props);
}

Thank you

Shubham Khatri · Accepted Answer · 2018-06-22 06:43:41Z

2

txId is available to the Router component though the router props, and when you render a component through render props, you need to pass the router props to the component

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

and then in the component you can get it like

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

answered Jun 22, 2018 at 6:43

Shubham Khatri

284k58 gold badges431 silver badges411 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to pass URL params to render function in ReactJS

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related