React路由器v4参数

Question

我正在使用React路由器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

匹配是路由器v4在路由匹配时注入的属性。

A匹配对象具有以下属性：

• URL -the匹配的当前位置的路径名
• 路径的一部分 - 该路由的路径
• isExact路径===路径名
• PARAMS - 包含path-to-regexp捕获的 的值的对象

至于下面V3教程与V4 - 我不会推荐它，因为两个版本之间有很大的变化