javascript - 在react中创建控制面板页面

Question

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

这是我的导航栏:

单击用户界面将呈现一个 todos api 页面，用户可以在其中添加待办事项等。我当前的实现是，当单击用户界面时，它将调度一个 redux 操作，该操作将发送一个新页面字符串，如“todos.userinterface”。接收者将收到该字符串，并根据点知道该子部分是“userinterface”，父部分是“todos”。所以它会像 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>

编辑 创建嵌套路由的方法如下。 您的应用程序组件(顶级组件)将包含渲染控制面板(中级组件)的路由。所以应用程序中的路线将是

<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 如下:

/-> 首页

/controlpanel ->控制面板主页

/controlpanel/todos -> todos 组件