Question

我正在尝试实现一个系统，当单击导航栏中的某个项目时，它将在屏幕上加载一个新组件。我在将其设置为新网址并保持状态时遇到问题。让我澄清一下。

这是我的导航栏代码：

from operator import sub tuple(map(sub, a, b))

这是我的手柄选择代码：

<Nav pullRight activeKey="1" onSelect={k => this.handleSelect(k)}>
  <NavItem eventKey={1} href={'/component1'}>
    Component 1
  </NavItem>
  <NavItem eventKey={2} href={'/component2'}>
    Component 2
  </NavItem>
</Nav>

在渲染中，我这样做：

handleSelect(eventKey, event) {
     this.setState({
         componentToLoad: eventKey
     });
     event.preventDefault();
 }

我遇到的问题是因为href重新添加到URL时页面重新加载，并且我丢失了状态，所以它总是加载组件1，因为我在构造函数中将其设置为该组件。如果删除href，它会起作用，但是URL不是我想要的。

如何获取要加载的组件，添加到URL并保持状态的信息？

谢谢

Answer 1

如评论中所述，React Router是满足您要求的不错选择。 Here's a codesandbox使用React Router，仅说明您描述的功能。

您也可以使用浏览器的History API（请参见pushState方法）直接操作URL，而无需重新加载页面，尽管请注意有some differences in the api in modern browsers。

在向URL添加href的同时加载新组件

1 个答案: