将React-Router V2迁移到V4 Onenter参数

Question

我正在从react-router v2到v4迁移一个应用程序（不是我写的）。

旧的V2代码看起来像这样：

<Route path="/configurations/:id" onEnter={loadConfiguration}>
    // some stuff
</Route>

新的V4代码看起来像这样：

<Route path="/configurations/:id" component={MyComponent}>
    // some stuff
</Route>
export default class MyComponent extends Component {
  componentDidMount() {
    loadConfiguration()
  }
  // render method, etc
}

问题在于，在V2中，LoadConfiguration函数用3个参数调用 - NextState，替换，回调

在V4代码中，LOADCONFIGURATION函数用0参数调用。

从v2到v4迁移时，我如何将相同的值传递给loadConfiguration？

Answer 1

您可以使用渲染将道具传递给您的组件：

<Route path="/configurations/:id" render={
  () => <MyComponent nextState={ nextState } replace={ replace } callback={ callback } />
} />

，然后在您的组件中：

export default class MyComponent extends Component {
  loadConfiguration() {
    ...
  }
  componentDidMount() {
    this.loadConfiguration(this.props.example, this.props.replace, this.props.callback)
  }
  // render method, etc
}

您还可以从父级传递 loadConfiguration 函数，作为prop，如果需要的话，然后将其称为 this.props.props.loadconfiguration（）

---

注意：您也可以通过父母的道具：

<Route path="/configurations/:id" render={
  (props) => <MyComponent example={ props.example } />
} />