使用react-sidebar更改侧栏项目上的主要内容

Question

我正在使用react-sidebar。我正在使用的示例代码是实时的 here

我不想在侧边栏项目点击上重新加载页面。我只想更改侧栏项单击时的主要内容文本。

例如，假设我在侧栏上有3个菜单项：Mr.A，Mr.B，Mr.C

右侧的主要内容应该是Hello，Mr.A或Hello，Mr.B或Hello，Mr.C.我只想从侧边栏到父项目获取数据，该项目同时运行侧边栏和主要内容区域。我正在使用的上述演示的源代码是here

Answer 1

根据边栏中点击的内容，有多种方法可以更改内容。您可以使用路由解决方案(more info)：

1. 反应路由器（localhost：8080 / mrA或localhost：8080 / mrB）或
2. 哈希路由器（localhost：8080 / #mrA或localhost：8080 / #mrB）

另一种方法是使用状态来跟踪用户在侧边栏中单击的选项，然后显示该选项(conditional rendering based on state)的相应内容。在此链接示例中，它使用if else模式，但您不限于此。