IT技术 - 使用重定向时完全重建react父组件 - 吾爱随笔录

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

不幸的是，出于隐私原因，我无法分享我的确切代码，但这里是通用代码结构（显然不可编译，只是为了了解我们架构的要点）。

在 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 作为真，父组件总是重新安装。我最终得到了一个全新的父组件，它将清除保存在本地状态中的某些元素。应用程序永远不会重新安装，但父组件会。我只希望重新安装子组件，父组件应保持原样。最初 Category 组件甚至是一个高阶组件，我们将其切换为一个普通的组件类，但是无论是否有条件地呈现特定情况，似乎也没有任何不同。

此外，我一直在玩这个 codeandbox，并调整了原始代码以更紧密地匹配我的项目并利用链接和重定向，并且父应用程序组件似乎从未重新安装。所以......似乎有可能，我只是不确定我做错了什么。

任何帮助将不胜感激:) 谢谢！