get param from url in react-router

Question

Now I'm doing 'dirty' split to get any id from the url. I'm not sure how to utilise react router, I did something like this

this.__isEdit = (this.props.history.location.pathname.indexOf('edit') > -1)

const pathnameArr = this.props.history.location.pathname.split('/')
this.__todoId = pathnameArr[pathnameArr.length - 2] //get second last arr

for one of my route

<Route exact path='/admin/ad/:id/edit' component={createTodoComponent} />

Anyway I can improve it the code?

@DaleFrancis yes but this has nothing to do with redux I guess? — Jenny Mok, Sep 06 '17 at 16:58

Dale Francis · Answer 1 · 2017-09-06T22:42:42.680

6

So for you component you'll need to wrap it with the withRouter method from 'react-router-dom' then you can get any of the params from this.props

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

const component = ({match}) => {
    const id = match.params.id

    return (
        <span>{id}</span>
    )
}

export default withRouter(component)

or if you want to do it with the React component class

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

class NewComponent extends Component {
    render() {
        const {match} = this.props
        const id = match.params.id

        return (
            <span>{id}</span>
        )
    }
}

export default withRouter(NewComponent)

edited Sep 06 '17 at 22:42

answered Sep 05 '17 at 01:13

Dale Francis

537
2
10

this is pure component what if my component is a class? – Jenny Mok Sep 06 '17 at 16:58
Its the same thing. you just pass the component class into withRouter and then do this.props.match.params.id – Dale Francis Sep 06 '17 at 22:39

score 0 · Answer 2 · answered Sep 05 '17 at 01:43

0

react router params are available on this.props.params inside the connected component.

answered Sep 05 '17 at 01:43

EMC

1,560
2
17
31

nope. Not in react router v4 – Jenny Mok Sep 06 '17 at 16:58

get param from url in react-router

2 Answers2