嵌套路由和 Material-UI 列表不起作用

Question

我有一个问题，我在侧边栏中使用了 material-ui，但路径不起作用。这是我的代码：

import React, { useState } from "react";
import { NavLink as RouterLink } from "react-router-dom";
import List from "@material-ui/core/List";
import ListItem from "@material-ui/core/ListItem";

export const Sidebar = (props) => {
  const { menu } = useSelector((state) => state);
  const [selectedIndex, setSelectedIndex] = useState(1);

  const handleListItemClick = (event, index) => {
    setSelectedIndex(index);
  };

  return (
    <List component="nav">
      {menu.map((text, index) => (
        <ListItem
          key={text.id}
          selected={selectedIndex === text.id}
          onClick={(event) => handleListItemClick(event, text.id)}
          component={RouterLink}
          to={text.url}
          button
        >
          .....
        </ListItem>
      ))}
    </List>
  );
};

点击菜单会重新加载整个页面。

This is the HTML

SessionRouter - This is the component where I call the Sidebar

AppRouter - This is where i call SessionRouter

PrivateRoute component

请帮忙。

Answer 1

现在您已经为您的问题添加了更多信息，特别是来自AppRouter、PrivateRouter 和SessionRouter 的屏幕截图，我能够重现您的问题。我的答案将基于React Router Dom - Nesting Example

如您所见，该示例与您的代码有些相同。结构如下：

1. 一个主要组件（在您的情况下为：AppRouter，在示例中为：NestingExample）带有一个包含所有内容的 Router，包括带有一些 Route 的 Switch。
2. 第二个组件（在您的情况下为：SessionRouter，在示例中为：Topics）具有更多信息（在您的情况下，它是一个带有链接和内容的侧边栏）和另一个具有不同 Route 的 Switch从第一个开始。

页面中的示例使用useRouteMatch 来获取url 和path，但您实际上并不需要它，因为您的“基本路线”是“/”。因此，如果您查看孔图片，您可以看到您的“路由”结构与 react-router-dom 页面中的示例完全相同。但是有一点细节，为此，我想邀请您在页面示例中尝试以下操作：在NestingExample 函数中将exact 属性添加到“主题”Route，如下所示：

<Switch>
     <Route exact path="/">
         <Home />
     </Route>
     <Route exact path="/topics">
         <Topics />
     </Route>
</Switch>

尝试单击任何主题，您会发现这与您遇到的问题相同。 所以，有了这个，我的建议是将exact={false} 属性添加到AppRouter 中的PrivateRoute 组件（因为你有...rest）

Answer 2

要解决此问题，您可以将url 传递给handleListItemClick，当单击按钮时，您可以使用history 库的push 方法更改页面：

const handleListItemClick = (event, index, url) => {
  setSelectedIndex(index);
  history.push(url);
};

你应该更新ListItem的渲染：

<ListItem
  key={text.id}
  selected={selectedIndex === text.id}
  onClick={(event) => handleListItemClick(event, text.id, text.url)}
  component={RouterLink}
  to={text.url}
  button
>
  .....
</ListItem>;