React-route 中的道具是空的

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。

我看过很多关于此的问题和网页，但其中 none 确实解决了这个问题。

Answer 1

只有您传递给 <Route component= 的组件才会收到参数信息，就像将 props 从任何组件传递到另一个组件一样。他们不会跳过树中的任何组件。您需要将道具从 BugDetails.

传递给 BugDetail

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>
    )
  }
})

如果你不想传递 props 有一些解决方案，比如自己将 prop 信息放在上下文中，或者根据你的 react-router 版本，一些其他方法如 withRouter

React-route 中的道具是空的

Props are empty in React-route

url-routing

reactjs

react-router