阵营路由器通帕拉姆到组件

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

阵营路由器通帕拉姆到组件

回答

相关问题