React Router 路由不适用于 MUI Drawer 和 Redux Toolkit

Question

将 Material UI 组件 Drawer 与 React Router 结合使用，使用 Redux Toolkit 管理全局状态。当我单击抽屉中的 NavLinks 时，它会更改不一致的路线。有时它有效，有时您需要单击两次，有时我只是不更改任何内容。可能是什么问题？

抽屉.tsx

const navItems = [
  { name: "Home", path: "/" },
  { name: "Download", path: "/download" },
  { name: "Question", path: "/questions" },
  { name: "About", path: "/about" },
];

export default function Drawer() {
  const isOpen = useSelector((state: RootState) => state.drawer.isOpened);
  const drawerDispatch = useDispatch();

  return (
    <MuiDrawer open={isOpen} onClose={() => drawerDispatch(toggleDrawer())}>
      <Box sx={{ width: 250 }} role="presentation">
        <Typography
          variant="h6"
          component="div"
          sx={{
            ml: 2,
            mt: 1,
          }}
        >
          Page
        </Typography>
        <List>
          {navItems.map((navItem) => (
            <ListItem
              key={navItem.name}
              disablePadding
              onClick={() => drawerDispatch(toggleDrawer())}
            >
              <ListItemButton>
                <NavLink to={navItem.path}>
                  <ListItemText
                    primary={navItem.name}
                    sx={{ color: "text.primary" }}
                  />
                </NavLink>
              </ListItemButton>
            </ListItem>
          ))}
        </List>
      </Box>
    </MuiDrawer>
  );
}

drawerSlice.ts

export interface DrawerState {
  isOpened: boolean;
}

const initialState: DrawerState = {
  isOpened: false,
};

export const drawerSlice = createSlice({
  name: "drawer",
  initialState,
  reducers: {
    toggle: (state) => {
      state.isOpened = !state.isOpened;
    },
  },
});

main.tsx

ReactDOM.createRoot(document.getElementById("root")!).render(
  <React.StrictMode>
    <ReduxProvider store={store}>
      <BrowserRouter>
        <Routes>
          <Route path="/" element={<App />}>
            <Route index element={<HomePage />} />
            <Route path="/download" element={<DownloadPage />} />
            <Route path="/questions" element={<QuestionsPage />} />
            <Route path="/about" element={<AboutPage />} />
          </Route>
        </Routes>
      </BrowserRouter>
    </ReduxProvider>
  </React.StrictMode>
);

尝试添加和删除不同项目的 onClick 事件。检查抽屉切片和路由逻辑。将 stopPropagation 添加到 ListItem，以便该事件不会冒泡。

Answer 1

好的，所以我刚刚弄清楚问题是什么。我用 NavLink 包装 ListItemText，这使得仅文本可导航，但 ListItem 不可以。所以，我只是用 NavLink 包装了 ListItem，它工作正常。