使用 React Router 为不同的路由使用相同的组件答案

【问题标题】：Using the same component for different Routes with React Router使用 React Router 为不同的路由使用相同的组件
【发布时间】：2016-08-17 18:07:56
【问题描述】：

我有一个PageBuilder 组件，它根据配置文件动态构建编辑/列表页面。我想要使用相同的PageBuilder 组件的动态路由（例如“/collection/list”、“/collection/edit/123123”、“/dashboard”等）。

我无法使其正常工作 - 例如，如果我在“/collection/list”中，当单击指向“/collection/edit/1231”的链接时不起作用。只有刷新该 URL 才有效（反之亦然）。

我尝试将我的初始化代码 PageBuilder 的 componentWilLReceiveProps 放入，但它似乎每秒都会调用它。

我的路线如下所示：

<Route path="/" component={App}>
  <IndexRedirect to="/dashboard" />
  <Route path="/:page/:collection/:action(/:entity_id)" component={PageBuilder}  />
  <Route path="/:page" component={PageBuilder} />
</Route>

还有我的 PageBuilder：

constructor(props) {
    super(props);
    this.createSectionsHTML = this.createSectionsHTML.bind(this);
    this.onChange = this.onChange.bind(this);
    this.onSave = this.onSave.bind(this);
}

getPageName() {
    return this.props.params.page.replace(/-/g, '_').toLowerCase();
}

componentWillReceiveProps(props) {
    this.action = this.props.params.action;
}

componentWillMount() {
    let pageName = this.getPageName();
    this.props.dispatch(setInitialItem(pageName));
}

componentDidMount() {

    let pageName = this.getPageName();
    let { collection, entity_id } = this.props.params;

    if (collection && entity_id) {
        let { dispatch } = this.props;
        dispatch(getCollectionEntity(collection, entity_id, pageName));
    }
}

对于每次重定向到不同路线时如何重新渲染页面有什么想法吗？

如果我可以在重定向时卸载并重新安装组件，那就太好了，但我不确定如何告诉 React Router 这样做......

谢谢！

【问题讨论】：

标签： javascript reactjs react-router

【解决方案1】：

使this.state 控制组件的渲染方式。

现在，在componentWillReceiveProps 中，检查nextProps 参数

componentWillReceiveProps(nextProps, nextState) {
  if( <check in nextProps if my route has changed> ) {
    let newState = Object.assign({}, this.state);
    // make necessary changes to the nextState Object by calling
    // functions which would change the rendering of the current page
    this.setState({ nextState });
  }
}

这将使componentWillReceiveProps 仅在路由更改时采取行动。

现在在你的渲染函数中，

render() {
  const { necessary, variables, to, render } = this.state;
  let renderVariables = this.utilityFunctionsReqToRender(someArgs);
  return (
    <toRenderJsx>
      ...
    </toRenderJsx>
  )
}

这将使您的组件在路由更改时“刷新”。

【讨论】：

谢谢！我的 PageBuilder 的工作方式并不真正依赖于this.state，但我可能会改变它以便它这样做（我使用 Redux 作为我的应用程序范围的状态）。我在使用这种方法时遇到的另一个问题是我知道我的位置何时发生变化，但如果我要刷新页面，我无法知道我“改变了”路线（因为 nextProps 和 this.props 是显然相同......）但我会尝试使用这个解决方案，我认为这是一个很好的起点。谢谢！
酷，我得到了这个工作（嗯，有一些小问题，但路由工作！）通过改变渲染更多地依赖this.state。谢谢！

【解决方案2】：

componentWillReceiveProps 自 React 16.3.0 起已弃用（正如浏览器控制台中的警告所说）

参考： https://reactjs.org/docs/react-component.html#componentdidupdate

所以 componentDidUpdate 可用于获取新状态并根据参数重新加载数据

componentDidUpdate(prevProps, prevState, snapshot) {
    console.log("componentDidUpdate " +prevState.id);
    reloadData(prevState.id);
}

【讨论】：