0

我正在尝试实现一个系统，当单击导航栏中的项目时，它会在屏幕上加载一个新组件。我遇到了一个问题，使它成为一个新的 URL 并保持我的状态。让我澄清一下。

这是我的导航栏代码：

<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();
 }

在我的渲染中，我这样做：

render() {
    if(this.state.componentToLoad === 'component1'){
        return (<Component1/>);
    } else if(this.props.componentToLoad === 'component2'){
        return (<Component2/>);
}

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

如何让它加载我想要的组件、添加到 URL 并保持状态？

谢谢

4

1 回答 1

1

正如评论中提到的，React Router是满足您要求的不错选择。 这是一个使用 React Router 的代码框，只是说明了您描述的功能。

您也可以使用浏览器的History API（请参阅 pushState 方法）直接操作 URL 而无需重新加载页面，但请注意现代浏览器中的 api 存在一些差异。

于 2018-11-20T04:35:29.110 回答