소품이가 내 라우터의 정의입니다

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

같은 반응 라우터의 버전 다른 방법에 따라 같은 몇 가지 해결책이있다 소품을 통과해야하고 싶지 않은 경우