Question

我有一个单页面应用程序，我已经定义了应用程序中的所有路径，以便在导航到它们时执行相同的反应组件（使用* -wildcard）。

似乎该组件仅在导航时执行一次。

如何在导航发生任何变化时调用组件的执行/实例化？

这是我的路线jsx：

<Route path="/" component={App}>    
    {<IndexRoute component={TVPage} />}      
    {<Route path="*" component={TVPage} />}
</Route>

Answer 1

我假设当你说“组件只执行一次”时，你的意思是它只安装一次。

由于您没有显示您的代码，我只能假设您使用过lifecycle methods之一：componentWillMount | componentDidMount

这些方法仅在组件装载时触发一次。根据您的Route配置，每当您切换到不同的URL时，由于它使用相同的组件，它将不会卸载并再次安装（因此您的加载逻辑仅触发一次），但只是在其道具已更改时重新呈现。这就是为什么你应该插入在每个道具变化时触发的生命周期方法（如componentWillReceiveProps）。

请改为尝试：

class TVPage extends Component {

    constructor(props) {
        super(props);
    }

    componentWillMount() {
        // Load your data/state (initial)
        this.props.loadMyData(this.props.whatever.data);
    }

    componentWillReceiveProps(nextProps) {
        if (this.props.whatever.myStatus !== nextProps.whatever.myStatus) {
            // Load your data/state (any page change)
            nextProps.loadMyData(nextProps.whatever.data);
        }
    }

    render() {
        // Render whatever you want here
    }
}

componentWillMount将在挂载（初始加载）时触发，并且componentWillReceiveProps将至少在每次道具更改时触发。

Answer 2

使用查询参数查看此示例中的反应路由器：https://github.com/reactjs/react-router/blob/master/examples/query-params/app.js

在你的TVPage组件内的componentDidMount函数中，我会将数据作为params传递到URL中，然后更新组件的状态。每次状态在组件内发生变化时，它都会重新加载。

示例组件：

class TVPage extends Component {
  constructor(props) {
    super(props);
    this.state = {
      data: null
    }
  }

  componentDidMount() {
    // from the example path /TVPage/:id
    let urlData = this.props.params.id;
    this.setState({data: urlData})

  }

  render() {
    return (
      <div>
        {this.state.data}
      </div>
    );
  }

}

星号的Reactjs路由只执行一次

2 个答案: