javascript - 使用重定向时 react 父组件完全重建

Question

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

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

在 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 组件甚至是一个高阶组件，我们将其切换为一个普通组件类，但有或没有条件渲染特定情况，似乎也没有任何不同。

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

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

Answer 1

这帮了我很多忙: https://github.com/ReactTraining/react-router/issues/6122

我意识到我们的 App 的 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>
    );
  }
}