React Router v4 参数

Question

我正在学习使用 React Router v3 的 React 教程。当我使用 React Router v4 时。我将一个名为 id 的参数从一个名为 Root 的组件传递给另一个名为 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 是什么意思？

Answer 1

匹配是属性当路由路径匹配时 react router v4 注入。

匹配对象具有以下属性：

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

至于跟随 V3 教程和 V4 - 我不推荐它，因为两个版本之间有很大的变化

React Router v4 参数

React Router v4 params

reactjs

react-router

react-router-v4