Reactjs 为什么React路由器位置道具仅在上下文中可用？

我正在使用react路由器dom（v4.3.1）构建react应用程序（v16.4.2）。在我定义一个链接并传递状态作为该链接的一部分之后，该信息仅在上下文中可用，而在道具中不可用。发生了什么事？如何在上下文中访问信息？或者将路线信息移动到道具

Index.JS

import React from "react";
import ReactDOM from "react-dom";
import "./index.css";
import App from "./components/App";
import { Router } from 'react-router-dom'
import registerServiceWorker from "./registerServiceWorker";
import history from "./components/common/History";

ReactDOM.render(<Router history={history}><App /></Router>, 
document.getElementById('root'));
registerServiceWorker();

我要传递的代码：

return <div className="information">
            <Button className="btn btn-block contacts-btn " onClick={() => this.toggle()}>Facility Landowner</Button>
            <div id="demo" className={"collapse" + (this.state.open ? ':not(.show)' : '')}>

                <div className="information">
                    No Landowner information exists for this facility. <Link to={{
                        pathname: `/facilities/contacts/${this.props.id}`,
                        state: { facilityName: this.props.facility.facilityName }
                    }}
                        className="hyperlinks"> Create A New Contact</Link>
                </div>
            </div>
        </div>

返回
this.toggle（）}>Facility Landowner
此设施不存在土地所有者信息。创建新联系人

反应工具视图：

---

使用

呈现道具方法呈现组件时

需要获取

路由器

道具作为回调函数中的参数。您需要将其传递给组件，以作为组件中的道具访问路由器道具

class App extends Component {
   render() {
      return (
          <Provider store={store}>
            <Router>
              <div>
                 <Header />
                <div className="container-fluid">
              <Route exact path="/" component={FacilitySearch} />
              <Route exact path="/facilities" render={(props) => <FacilitySearch {...this.props} {...props} />} />
              <Route exact path="/facilities/:id" render={(props) => <FacilityInfo id={props.match.params.id} {...this.props}  {...props}/>} />
              <Route exact path="/facilities/contacts/:id" render={(props) => <FacilityContactsForm id={props.match.params.id} {...this.props} {...props} />} />
              <Route exact path="/facilities/permits/:id" render={(props) => <PermitInfo id={props.match.params.id} {...this.props} {...props}/>} />
              <Route exact path="/facilities/reports/:id" render={(props) => <ReportInfo id={props.match.params.id} {...this.props} {...props} />} />
            </div>
            <Footer />
          </div>
        </Router>
      </Provider>
    );
  }
}

类应用程序扩展组件{
render（）{
返回(
} />
} />
} />
} />
} />
);
}
}

谢谢你的建议，但这似乎对我不起作用。我将routerProps添加到

设施/联系人/：id

路由中，但得到的结果相同<代码>}/>@rralbritton您将像

render={（routerProps）=>}

那样编写它，而不是像您所显示的那样我不懂。我不能取出

（props）

，否则路由中的这些语句，

id={props.match.params.id}{…this.props}

，props是未定义的。话虽如此，如果我删除所有对道具的引用，让它只说

}/>

，那么是的，它可以工作，但我也需要访问道具。我怎样才能做到这两个呢？对不起，我错了，我把这些论点命名为routerProps，但是你可以简单地传播道具<代码>渲染={（道具）=>}是！非常感谢你

return <div className="information">
            <Button className="btn btn-block contacts-btn " onClick={() => this.toggle()}>Facility Landowner</Button>
            <div id="demo" className={"collapse" + (this.state.open ? ':not(.show)' : '')}>

                <div className="information">
                    No Landowner information exists for this facility. <Link to={{
                        pathname: `/facilities/contacts/${this.props.id}`,
                        state: { facilityName: this.props.facility.facilityName }
                    }}
                        className="hyperlinks"> Create A New Contact</Link>
                </div>
            </div>
        </div>

class App extends Component {
   render() {
      return (
          <Provider store={store}>
            <Router>
              <div>
                 <Header />
                <div className="container-fluid">
              <Route exact path="/" component={FacilitySearch} />
              <Route exact path="/facilities" render={(props) => <FacilitySearch {...this.props} {...props} />} />
              <Route exact path="/facilities/:id" render={(props) => <FacilityInfo id={props.match.params.id} {...this.props}  {...props}/>} />
              <Route exact path="/facilities/contacts/:id" render={(props) => <FacilityContactsForm id={props.match.params.id} {...this.props} {...props} />} />
              <Route exact path="/facilities/permits/:id" render={(props) => <PermitInfo id={props.match.params.id} {...this.props} {...props}/>} />
              <Route exact path="/facilities/reports/:id" render={(props) => <ReportInfo id={props.match.params.id} {...this.props} {...props} />} />
            </div>
            <Footer />
          </div>
        </Router>
      </Provider>
    );
  }
}