reactjs - 为什么 React Router location props 只能在 Context 中使用？

Question

我正在使用 react-router-dom (v4.3.1) 构建一个 react-app (v16.4.2)。在我定义一个链接并将状态作为该链接的一部分传递之后，该信息仅在 Context 中可用，而不在 props 中可用。发生了什么？如何在上下文中访问信息？或者将路线信息移动到 Prop ？

索引.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();

应用.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>

React 工具 View :

Answer 1

在使用render props 方法 渲染组件时，您需要获取router props 作为回调函数中的参数。您需要将其传递给组件以访问 Router props 作为组件中的 props

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