从反应路由器中的 url 获取参数

Question

现在我正在执行“脏”拆分以从 url 中获取任何 id。我不确定如何使用反应路由器，我做了这样的事情

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

对于我的路线之一

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

无论如何我可以改进它的代码？

Answer 1

因此，对于您的组件，您需要使用来自“react-router-dom”的 withRouter 方法将其包装起来，然后您可以从 this.props 中获取任何参数

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

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

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

export default withRouter(component)

或者如果你想用 React 组件类来做

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)