小道具が反応ルートを

Question

に空になっているこれは私のルーターの定義です：

import BugsOverview from './BugsOverview'; 
import BugDetail from './BugDetail'; 
import './index.css'; 
import { Router, Route, browserHistory } from 'react-router' 

ReactDOM.render(
    <Router history={browserHistory}> 
    <Route path="/" component={Login} /> 
    <Route path="/login" component={Login} /> 
    <Route path="/bugs-overview" component={Bugs} /> 
    <Route path="/bugs-overview/:bugID" component={BugsDetails} /> 
    <Route path="/logout" component={Logout} /> 
    </Router>, 
    document.getElementById('root') 
); 

var BugsDetails = React.createClass({ 
    render: function() { 
    return (<div> 
     <h1>Bug Detail</h1> 
     <BugDetail /> 
    </div> 
    ); 
    } 
}); 

そして、これは私のBugDetailコンポーネントです：

import React, { Component } from 'react'; 
import './App.css'; 
import { browserHistory, Router } from 'react-router'; 

class BugDetail extends React.Component { 
    constructor(props, ctx) { 
    super(props); 
    console.log(props);// -->> {} 
    console.log(props.route);// -->> undefined 
    console.log(props.params);// -->> undefined 
    console.log(ctx);// -->> {} 
    this.state = { 
     un: "un", 
     pw: "pw" 
    }; 
    } 

    getBugID(){ 
     return (
      <span> {this.props.params.bugID} </span> 
    ) 
    } 

    render() { 
    return (
     <div className="App"> 
     Detail voor bug met id {this.getBugID()} 
     </div> 
    ); 
    } 
} 

export default BugDetail; 

問題はそう、propsオブジェクトは常に空であるということです私は自分のコンポーネントの引数に到達することはできません。言い換えれば、ユーザーがhttp://localhost:3000/bugs-overview/anBugIDに移動した場合、私は値anBugIDを検出できません。

私はこれに関する多くの質問とページを見てきましたが、誰もこの問題のトリックを行っていませんでした。

Answer 1

<Route component=に渡すコンポーネントだけが、どのコンポーネントから別のコンポーネントに小道具を渡すように、パラメータ情報を受け取ることになります。彼らはあなたの木のどんなコンポーネントもスキップしません。あなたはBugDetailに小道具をBugDetailsから渡す必要があります。

var BugsDetails = React.createClass({ 
    render: function() { 
    return (
     <div> 
     <h1>Bug Detail</h1> 
     <BugDetail 
      {...this.props} // this syntax passes all props 
      params={this.props.params} // or pass them individually 
     /> 
     </div> 
    ) 
    } 
}) 

あなたが小道具を渡すためにしたくない場合は、このような状況に自分を小道具の情報を入れて、または反応するルータのバージョンwithRouter

のようないくつかの他の方法に応じて、いくつかの解決策があり、