将 href 添加到 url 时加载新组件

Question

我正在尝试实现一个系统，当单击导航栏中的项目时，它会在屏幕上加载一个新组件。我运行遇到了一个问题，使它成为一个新的 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 代码：

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，并保持状态？

谢谢

Answer 1

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

您也可以使用浏览器的 History API (see pushState method) to manipulate the URL directly without a page reload, although be aware that there are some differences in the api in modern browsers。

将 href 添加到 url 时加载新组件

Load new component while adding href to url

javascript

navbar

reactjs

react-bootstrap

react-state-management