React路由器v4參數

我正在使用React路由器v3的React教程。當我使用React Router v4時。我將一個名爲id的參數從名爲Root的組件傳遞到名爲User的另一個組件。React路由器v4參數

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是什麼意思？

來源

2017-07-04 g3blv

檢查文檔：https://reacttraining.com/react-router/web/api/match –

匹配是路由器v4在路由匹配時注入的屬性。

A匹配對象具有以下屬性：

URL -the匹配的當前位置的路徑名
路徑的一部分 - 該路由的路徑
isExact路徑===路徑名
PARAMS - 包含path-to-regexp捕獲的的值的對象

至於下面V3教程與V4 - 我不會推薦它，因爲兩個版本之間有很大的變化

來源

2017-07-04 12:53:14

React路由器v4參數

回答

相關問題