使用重定向时反应父组件完全重建

Question

我正在尝试使用嵌套路由来保持父组件在屏幕上的外观，并且当用户在选项卡结构中左右导航时，该选项卡式界面中的内容会更新。我不希望父组件重新安装甚至重新渲染，只希望它的子组件发生变化。这是一个完全基于键盘的导航系统，所以我们没有使用链接或点击事件，只是在键盘上敲击left/right/up/down/enter。

不幸的是，出于隐私原因我不能分享我的确切代码，但这是一般代码结构（显然不可编译，只是为了了解我们的架构是什么样的）。

在App.js

class App extends Component {
  render() {
    return (
      <div className="App">
        <Switch>
          <Route
            path="/"
            exact
            match={ true }
            component={ () => <MainMenu/> }
          />
          <Route
            path="/category/:uniqueID"
            exact
            component={ () => <CategoryComponent childArray=[child1, child2, child3] /> }
          />
      />
        </Switch>
      </div>
    );
  }
}

在CategoryComponent.js

class CategoryComponent extends Component {
  render() {
    var childRoutes;
    this.props.childArray.forEach(child => {
      childRoutes.push(
        <Route
          key=child.id
          path={ `${this.props.match.path}/${child.path}` }
          component={ () => <ChildComponent/> }
        />
      );
    });

    return (
      <div className="CategoryComponent">
        ... // a bunch of UI stuff goes here, including the navigation for the child components
        <Switch>
          { childRoutes }
        </Switch>
      </div>
    );
  }
}

最后，在 ChildComponent.js

class ChildComponent extends Component {
  shouldComponentUpdate(nextProps) {
    // because this navigation is done exclusively by keyboard,
    // each child has a property of selected or not that it gets from its parent,
    // so only the currently selected one should actually be doing the redirect
    if (!this.props.isSelected && nextProps.isSelected) {
      this.redirect = true;
    }
  }
  render() {
    var redirect;
    if (this.redirect) {
      redirect = 
        <Redirect
          to={ `${this.props.match.path}/${this.props.thisChildPath}` }
        />;
    }

    return (
      <div className="ChildComponent">
        { redirect }
      </div>
    );
  }
}

希望以上所有内容都有意义，它就像我认为我可以从我们疯狂的复杂应用程序中做到的一样简单。基本上：

我们有一个带有使用唯一 ID 的路线的应用程序，即。 myApp.com/category/1234
在这个类别中，我们有一些选项卡可以导航到，例如蓝色、红色、黄色，对于每个选项卡，我们希望将路由嵌套在上面的内容中，并以类似 myApp 的方式结束。com/category/1234/blue，只会更新屏幕的一部分

我遇到的问题是，无论我在哪里放置重定向，如果我使用精确或（非精确路径），或者如果我在重定向中使用 push as true，父组件总是重新安装。我最终得到了一个全新的父组件，它将清除保存在本地状态中的某些元素。该应用程序永远不会重新安装，但父组件会。我只想重新安装子组件，父组件应保持原样。最初 Category 组件甚至是一个高阶组件，我们将其切换为一个普通组件 class，但有或没有条件渲染特定情况，似乎也没有任何不同。

此外，I have been playing around with this codesandbox 并调整了原始代码以更紧密地匹配我的项目并利用链接和重定向，并且父应用程序组件似乎从未重新安装。所以...看起来有可能，我只是不确定我做错了什么。

如有任何帮助，我们将不胜感激:) 谢谢！

Answer 1

这对我帮助很大： https://github.com/ReactTraining/react-router/issues/6122

我意识到我们的应用程序的 Switch Routing 正在使用 component，这导致每次重建。通过将它们全部切换为 render，问题得到解决：D

所以App.js变成了这个：

class App extends Component {
  render() {
    return (
      <div className="App">
        <Switch>
          <Route
           path="/"
            exact
            match={ true }
            render={ () => <MainMenu/> }
          />
          <Route
            path="/category/:uniqueID"
            exact
            render={ () => <CategoryComponent childArray=[child1, child2, child3] /> }
          />
      />
        </Switch>
      </div>
    );
  }
}

使用重定向时反应父组件完全重建

React Parent Component completely reconstructed when using Redirect

javascript

nested-routes

reactjs

react-router

react-router-dom