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 /蓝色，它将仅更新屏幕的一部分

我遇到的问题是，无论将重定向放置在何处，无论是使用精确路径还是（非精确路径），或者如果我在重定向中使用push as true，父组件始终重新安装。最后，我得到了一个全新的父组件，它将清除保存在本地状态中的某些元素。该应用程序永远不会重新安装，但父组件会重新安装。我只希望重新安装子组件，父组件应保持原样。最初，类别组件甚至是一个高阶组件，我们将其切换为一个普通的组件类，但是无论是否有条件地渲染特定的案例，这似乎都没有什么不同。

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

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

Answer 1

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

我意识到我们的应用程序的交换路由使用的是tf.train.batch，这每次都在引起重建。通过将所有这些都切换到component，解决了问题：D

因此App.js变成了这样：

render

Answer 2

我尝试使用渲染功能渲染路线和子路线，但看起来没有任何区别。

我在以下位置创建了示例代码：https://codesandbox.io/s/mmp54j370j如果您在控制台中观察到，那么每次我转到嵌套路由时，它仍然会渲染所有父组件并进行更新。（尽管不会再次启动构造函数）

无需“ render”属性，而只需应用“ component = {componentName}”，即可实现相同的目的

在两种情况下，就像React Router只是在更新组件，而不是在调用嵌套路由时完全完全卸载并重新安装组件。

如果我在那儿缺少什么，请告诉我。

使用重定向时，React父组件完全重建

2 个答案: