React Router v4 参数

Question

我正在跟随一个使用React Router v3的React教程。虽然我正在使用React Router v4版本，但我仍可以从名为Root的组件传递一个被称为id的参数到另一个名为User的组件。

export class Root extends  React.Component {
    render() {
        return(
            <div className="container">
                <div className="row">
                    <div className="col-xs-10 col-xs-offset-1">
                        <Header />
                    </div>
                </div>
                <div className="row">
                    <div className="col-xs-10 col-xs-offset-1">
                        <hr/>
                        <Route exact path="/" component={Home}/>
                        <Route path="/user/:id" component={User}/>
                        <Route path="/home" component={Home}/>
                        {/*{this.props.children}*/}
                    </div>
                </div>
            </div>
        );
    }
}

我使用如下代码获取参数{this.props.match.params.id}，并且它可以正常工作。

export class User extends React.Component {

    onNavigateHome() {
        this.props.history.push("/home")
    }

    render() {
        return (
            <div>
                <h3>The User Page</h3>
                <p>User ID: {this.props.match.params.id}</p>
                <button onClick={() => this.onNavigateHome()} className="btn btn-primary">Go home!</button>
            </div>
        );
    }
}

在这个教程中使用了{this.props.params.id}，我现在用{this.props.match.params.id}是正确的吗？而且match是什么意思？

- g3blv

---

请查看文档：https://reacttraining.com/react-router/web/api/match - Mayank Shukla

Answer 1

Match是React Router v4在路由路径匹配时注入的属性。

match对象具有以下属性：

• url — 当前位置路径名中匹配的部分
• path — 路由路径
• isExact—path === pathname
• params — 一个包含被path-to-regexp捕获的路径名值的对象

关于使用V4教程来学习V3 - 我不建议这样做，因为两个版本之间有实质性的改变。

- Davorin Ruševljan