Question

我正在使用React JS开发一个Web应用程序。现在，我正在尝试以编程方式重定向到另一条路线。我可以这样重定向。

this.props.history.push('/event/${this.props.id}/edit');

但是当我在子组件中使用它时，它将无法正常工作。这是我的情况。我有一个名为EventListComponent的父组件。在该组件内部，我渲染了另一个名为EventWidgetComponent的子组件。我在子组件中重定向。但是，在子组件中使用this.props.history时始终是未定义的。我该如何解决？

Answer 1

之所以发生这种情况，是因为您的子组件无权访问历史记录。子组件正在从父组件而不是从Router接收道具，这就是原因。

这些是解决问题的可能方法：

1-要么将方法从父级传递到子级，然后在父级组件内部执行重定向部分。从子组件中调用该方法以进行重定向。

2-使用withRouter临时并在其中渲染子组件，它将提供对子组件的历史记录访问。

赞：

import { withRouter } from 'react-router-dom'

// Child component here

class Child extends React.Component {
   // code
}

export default withRouter(Child)

检查以下答案：Programmatically navigating in React-Router v4

3-将历史的引用传递给道具中的孩子：

<Child history={this.props.history} />

Answer 2

如果要在其中使用history道具，可以将其从提供给Route的组件传递到子组件。

示例

class App extends React.Component {
  render() {
    return (
      <div>
        {/* ... */}
        <Route exact path="/" component={Parent} />
        {/* ... */}
      </div>
    );
  }
}

class Parent extends React.Component {
  render() {
    return (
      <div>
        <Child history={this.props.history} />
      </div>
    );
  }
}

Answer 3

您可以将道具传递给从父EventListComponent传递的EventWidgetComponent，例如onHistoryPush：

<EventWidgetComponent onHistoryPush={() => this.props.history.push('/event/${this.props.id}/edit')}

在React JS中以编程方式重定向子组件内部不起作用

3 个答案: