Javascript 渲染多个组件而不更改布线路径

我的目标是呈现

组件

，而不更改其url路径名。此

组件

负责在用户单击链接时呈现其他三个子

组件

。我的代码正在运行，但我认为这不是正确的方法。我的问题是：实现这一目标的最佳方式是什么。下面是我的代码：

const ComponentOne = () => {
  return (
    <div><h1>Component 1</h1></div>
  )
}

const ComponentTwo = () => {
  return (
    <div><h1>Component 2</h1></div>
  )
}

const ComponentThree = () => {
  return (
    <div><h1>Component 3</h1></div>
  )
}


class Header extends React.Component {
  constructor(props) {
        super(props);
        this.state = {

            linkName: 'three'
        };
        this.renderList = <ComponentThree/>;
    }

    handleClick = (linkName) => {
        if (linkName === 'one') {
            this.renderList = <ComponentOne/>;
            this.setState({ linkName });
        } else if (linkName === 'two') {
            this.renderList = <ComponentTwo />;
            this.setState({ linkName  });
        } else {
            this.renderList = <ComponentThree />;
            this.setState({ linkName  });
        }
        return this.renderList;
    };
  render() {
    return (
      <div>
        <ul>
          <li><a 
            className={this.state.linkName === 'one' ? 'active' : ''}
            onClick={() => this.handleClick('one')}>
            Component 1
            </a></li>

          <li><a
            className={this.state.linkName === 'two' ? 'active' : ''}
            onClick={() => this.handleClick('two')}>
            Component 2
            </a></li>

          <li><a 
            className={this.state.linkName === 'three' ? 'active' : ''}
            onClick={() => this.handleClick('three')}>
            Component 3
            </a></li>

      </ul>
        {this.renderList}
      </div>
    )
  }
}


ReactDOM.render(<Header/>, document.querySelector('#root'))

const ComponentOne=（）=>{
返回(
组成部分1
)
}
常量组件二=（）=>{
返回(
构成部分2
)
}
常量组件三=（）=>{
返回(
构成部分3
)
}
类头扩展了React.Component{
建造师（道具）{
超级（道具）；
此.state={
linkName:‘三’
};
this.renderList=；
}
handleClick=（linkName）=>{
如果（linkName=='one'）{
this.renderList=；
this.setState（{linkName}）；
}else if（linkName=='two'）{
this.renderList=；
this.setState（{linkName}）；
}否则{
this.renderList=；
this.setState（{linkName}）；
}
返回此.renderList；
};
render（）{
返回(

可以简化代码，方法是将索引保持在状态，然后根据当前索引进行渲染。以下是我稍微简化的解决方案：


返回(
组成部分1
);
};
常量组件二=（）=>{
返回(
构成部分2
);
};
常量组件三=（）=>{
返回(
构成部分3
);
};
类头扩展了React.Component{
建造师（道具）{
超级（道具）；
此.state={
链接索引：3
};
}
handleClick=linkIndex=>{
this.setState（{linkIndex}）；
};
render（）{
返回(


this.handleClick（1）}
>
组成部分1


this.handleClick（2）}
>
构成部分2


this.handleClick（3）}
>
构成部分3


{this.state.linkIndex==1&&}
{this.state.linkIndex==2&&}
{this.state.linkIndex==3&&}
);
}
}
ReactDOM.render（，document.querySelector（“#root”）；
默认情况下，标签将重新加载页面

您可以将事件对象从onClick action（
onClick={（e）=>this.handleClick（e，'three'）}
）传递到handleClick方法，并在该方法中使用
e.preventDefault（）
阻止重新加载页面

您还可以使用React Router从使用默认HTML
切换到
。链接组件正在呈现
，但单击后不会重新加载整个页面

  return (
    <div>
      <h1>Component 1</h1>
    </div>
  );
};

const ComponentTwo = () => {
  return (
    <div>
      <h1>Component 2</h1>
    </div>
  );
};

const ComponentThree = () => {
  return (
    <div>
      <h1>Component 3</h1>
    </div>
  );
};

class Header extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      linkIndex: 3
    };
  }

  handleClick = linkIndex => {
    this.setState({ linkIndex });
  };

  render() {
    return (
      <div>
        <ul>
          <li>
            <a
              className={this.state.linkIndex === 1 ? "active" : ""}
              onClick={() => this.handleClick(1)}
            >
              Component 1
            </a>
          </li>

          <li>
            <a
              className={this.state.linkIndex === 2 ? "active" : ""}
              onClick={() => this.handleClick(2)}
            >
              Component 2
            </a>
          </li>

          <li>
            <a
              className={this.state.linkIndex === 3 ? "active" : ""}
              onClick={() => this.handleClick(3)}
            >
              Component 3
            </a>
          </li>
        </ul>
        {this.state.linkIndex === 1 && <ComponentOne />}
        {this.state.linkIndex === 2 && <ComponentTwo />}
        {this.state.linkIndex === 3 && <ComponentThree />}
      </div>
    );
  }
}

ReactDOM.render(<Header />, document.querySelector("#root"));