Javascript 在将href添加到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>

在我的渲染中，我执行以下操作：

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

render（）{
if（this.state.componentToLoad=='component1'）{
返回（）；
}else if（this.props.componentToLoad=='component2'）{
返回（）；
}

我遇到的问题是，将href添加到页面重新加载的URL中，我失去了状态，因此它总是加载组件1，因为我在构造函数中将其设置为该值。如果我删除href，它会工作，但URL不是我想要的方式

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

---

感谢您

如评论中所述，是满足您需求的好选择。 使用React路由器，简单说明您描述的功能

---

您也可以使用浏览器的（请参见pushState方法）直接操纵URL，而无需重新加载页面，但请注意确实存在这种情况。

使用react路由器。无需重新发明轮子。

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