Question

现在，我正在做“肮脏的”＆＃39;拆分以从网址获取任何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

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

在react-router中从url获取param

2 个答案: