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

Question

我正在使用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();

App.JS

import ReportInfo from './reporting/ReportInfo';
import FacilityContactsForm from "./facilities/FacilityContactsForm";
import "bootstrap/dist/css/bootstrap.min.css";

const store = init();

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={() => <FacilitySearch {...this.props} />} />
          <Route exact path="/facilities/:id" render={(props) => <FacilityInfo id={props.match.params.id} {...this.props} />} />
          <Route exact path="/facilities/contacts/:id" render={(props) => <FacilityContactsForm id={props.match.params.id} {...this.props} />} />
          <Route exact path="/facilities/permits/:id" render={(props) => <PermitInfo id={props.match.params.id} {...this.props} />} />
          <Route exact path="/facilities/reports/:id" render={(props) => <ReportInfo id={props.match.params.id} {...this.props} />} />
        </div>
        <Footer />
      </div>
    </Router>
  </Provider>
);

} }

export default App;

我要传递的代码：

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>

反应工具视图：

Answer 1

当使用渲染道具方法渲染组件时，您需要在回调函数中获取路由器道具作为参数。您需要将其传递给组件以访问路由器道具作为组件中的道具

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