陣營路由器通帕拉姆到組件

const rootEl = document.getElementById('root'); 

ReactDOM.render(
    <BrowserRouter> 
     <Switch> 
      <Route exact path="/"> 
       <MasterPage /> 
      </Route> 
      <Route exact path="/details/:id" > 
       <DetailsPage /> 
      </Route> 
     </Switch> 
    </BrowserRouter>, 
    rootEl 
);

我試圖訪問ID在DetailsPage組件，但它不被訪問。我試過陣營路由器通帕拉姆到組件

<DetailsPage foo={this.props}/>

將參數傳遞給DetailsPage，但是徒勞。

export default class DetailsPage extends Component { 
    constructor(props) { 
     super(props); 
    } 

    render() { 
     return (
      <div className="page"> 
      <Header /> 
      <div id="mainContentContainer" > 

      </div> 
      </div> 
    ); 
    } 
}

因此，任何想法如何將ID傳遞給DetailsPage？

來源

2017-08-26 Mudit Tuli

如果你想道具傳遞給一個部件的路由中，最簡單的方法是利用render內，像這樣：

<Route exact path="/details/:id" render={(props) => <DetailsPage globalStore={globalStore} {...props} /> } />

您可以通過訪問DetailPage裏面的道具：

this.props.match 
this.props.globalStore

{...props}需要通過原路線的道具，否則你只會得到this.props.globalStore裏面的DetailPage。

來源

2017-08-27 03:18:09 Win

但是爲什麼它不能按照我在問題中指定的方式工作？ –

首先，你的代碼是錯誤的。在路由中放置一個組件，如''與'。即使您訪問過「/」，您的代碼也會呈現「DetailsPage」。其次，當你寫''時，''這個''指的是'null'。這就是爲什麼它不起作用。 – Win

使用的組件：

<Route exact path="/details/:id" component={DetailsPage} />

而且你應該能夠id用來訪問：

this.props.params.id

的DetailsPage組件內部

來源

2017-08-26 19:18:41 Dekel

有趣的作品。但是，爲什麼這是分開的，因爲我想將一個變量傳遞給組件。 '<路線確切路徑= 「/信息/：ID」> ' 現在使globalStore不作品。 –

使用渲染方法：

<Route exact path="/details/:id" render={(props)=>{ 
    <DetailsPage id={props.match.params.id}/> 
}} />

你應該能夠訪問使用id：

this.props.id

的DetailsPage組件

來源

2017-08-27 03:12:19

我用這個訪問我的組件的ID：

<Route path="/details/:id" component={DetailsPage}/>

而且在細節部分：

export default class DetailsPage extends Component { 
    render() { 
    return(
     <div> 
     <h2>{this.props.match.params.id}</h2> 
     </div> 
    ) 
    } 
}

這將渲染H2內的任何ID，希望可以幫助別人。

來源

2018-02-01 21:40:19

陣營路由器通帕拉姆到組件

回答

相關問題