星号的 Reactjs 路由只执行一次

Question

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

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

如何在导航发生任何变化时调用组件的 execution/instantiation？

这是我的路线 jsx：

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

Answer 1

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

在您的 TVPage 组件内的 componentDidMount 函数中，我会在 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>
    );
  }

}

Answer 2

我假设当你说 "the component only executes once" 时你的意思是它只安装一次。

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

这些方法只在组件挂载时触发一次。给定你的路由配置，每当你切换到不同的 URL，因为它使用相同的组件，它不会卸载并再次安装（因此你的加载逻辑只触发一次），但如果它的道具只是重新渲染已改变。这就是为什么你应该插入一个在每次 prop 更改时触发的生命周期方法（比如 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 至少会在您的道具每次更改时触发。

星号的 Reactjs 路由只执行一次

Reactjs route for asterisk executes only once

navigation

components

wildcard

reactjs

react-router