在react中创建一个控制面板页面

Question

在控制面板页面方法中实现导航栏的另一种有效方法是什么？假设我们有一个带有一堆菜单按钮的菜单栏。单击按钮将在页面一侧呈现新页面（甚至不刷新浏览器）。

这是我的导航栏：

单击用户界面将呈现todos api页面，用户可以在其中添加待办事项等。我当前的实现是，当单击用户界面时，它将调度redux操作，该操作将发送新页面字符串，如“todos.userinterface”。接收器将接收该字符串并且将知道该子部分是“用户接口”并且父部分是基于该点的“待命”。因此它会像const section = pageString.slice(0, pageString.indexOf('.'));和const subsection = pageString.slice(pageString.indexOf('.') + 1, pageString.length);

那样切片

我觉得这有点不可靠，因为如果“查询字符串”变得更长并且有更多小节呢？像todos.userinterface.edittodo等一样，我将不得不做一个三重.slice（）方法来获取所有部分。

此外，目前处理此问题的惯例是什么？

Answer 1

您可以使用React-Router库创建导航栏。您的navbar将包含指向不同组件路径的NavLink组件。例如。用户界面链接类似于

<NavLink to='/todos'>User Interface </NavLink>.

您的控制面板将包含将呈现不同组件的路由。

<Switch>
    <Route path='/todos' component={Todos}/>
</Switch>

修改 您可以创建嵌套路由的方式如下。 您的应用程序组件（顶级组件）将包含用于呈现控制面板（中级组件）的路由。所以App中的路线是

<Switch>
    <Route path='/' component={Home}/>
    <Route path='/controlpanel' component={ControlPanel}/>
    .....//other routes
</Switch>

您的控制面板组件将包含渲染Todos（底层）组件的路线。

<Switch>
    <Route path='/' component={ControlPanelHome}/>
    <Route path='/todos' component={Todos}/>
    ..... //other routes
</Switch>

这种类型的结构可以让你实现你想要实现的渲染风格。现在您访问组件的URL将如下所示：

/ - ＆gt;家

/ controlpanel - ＆gt;控制面板主页

/ controlpanel / todos - ＆gt;待办事项组件