从反应路由器中的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)

Answer 2

react 路由器参数在连接组件内的 this.props.params 上可用。