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中使用3个参数调用loadConfiguration函数 - nextState，replace，callback

在v4代码中，使用0参数调用loadConfiguration函数。

从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.loadConfiguration（）

注意：您也可以从父母传递道具：

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

将react-routers v2迁移到v4 onEnter参数

1 个答案: