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

React-route

1 个答案: