React Router与Material UI侧边栏集成异常：URL变组件不加载

我帮你找出问题根源啦——重复嵌套的<Router>组件是导致URL变化但组件不加载的核心原因。React Router的<Link>和<Route>必须共享同一个路由上下文才能协同工作，而你在menu.js的每个菜单项里都套了独立的<Router>，这会让导航操作被限制在局部上下文里，外层的<Switch>根本感知不到路由变化。

咱们一步步来修复：

1. 移除menu.js中多余的<Router> #

把SingleLevel和MultiLevel组件里的<Router>全部删掉，因为我们只需要在应用的最外层保留一个路由上下文即可。

修改后的menu.js关键部分：

const SingleLevel = ({ item }) => {
  const classes = useStyles();
  return (
    <Link to={item.to} className={classes.link}>
      <ListItem button>
        <ListItemIcon>{item.icon}</ListItemIcon>
        <ListItemText primary={item.title} />
      </ListItem>
    </Link>
  );
};

const MultiLevel = ({ item }) => {
  const classes = useStyles();
  const { items: children } = item;
  const [open, setOpen] = useState(false);
  const handleClick = () => {
    setOpen((prev) => !prev);
  };

  // 注意：父菜单项（比如Education）本身不需要跳转，所以不要包裹Link
  return (
    <>
      <ListItem button onClick={handleClick}>
        <ListItemIcon>{item.icon}</ListItemIcon>
        <ListItemText primary={item.title} />
        {open ? <ExpandLess /> : <ExpandMore />}
      </ListItem>
      <Collapse in={open} timeout="auto" unmountOnExit>
        <List component='div' disablePadding>
          {children.map((child, key) => (
            <MenuItem key={key} item={child} />
          ))}
        </List>
      </Collapse>
    </>
  );
};

2. 统一路由上下文的位置 #

把<Router>移到layout.js的最外层，确保侧边栏的<Link>和主内容区的<Switch>都处于同一个路由上下文里。

修改后的layout.js关键部分：

export const MiniDrawer = () => {
  const classes = useStyles();
  const theme = useTheme();
  const [open, setOpen] = useState(true);
  const toggle = useCallback(
    () => setOpen(!open),
    [open],
  );

  return (
    <Router> {/* 把Router移到这里，包裹整个组件 */}
      <div className={classes.root}>
        <CssBaseline />
        {/* AppBar、Drawer部分保持不变 */}
        <main className={classes.content}>
          <div className={classes.toolbar} />
          <Switch>
            <Route exact path='/' component={HomePage} />
            <Route exact path='/thedowtheory' component={TheDowTheory} />
            {/* 可以补充其他需要的路由 */}
            <Route exact path='/technical' component={() => <div>Technical Analysis Introduction</div>} />
          </Switch>
        </main>
      </div>
    </Router>
  );
}

额外优化建议 #

• 用Material UI的Link组件配合React Router：既保留Material UI的样式，又能实现路由跳转，用法如下：

  import { Link as MuiLink } from '@material-ui/core/Link';
  import { Link as RouterLink } from 'react-router-dom';
  
  // 在组件中使用
  <MuiLink component={RouterLink} to={item.to} className={classes.link}>
    {/* 菜单项内容 */}
  </MuiLink>
  

• 集中管理路由配置：把所有路由规则从menuitems.js里分离出来，单独放在一个routes.js文件里，方便后续维护。
• 多级菜单父项处理：如果父菜单项不需要跳转（比如你的Education），就不要包裹<Link>，只保留展开/折叠的交互逻辑即可。

内容的提问来源于stack exchange，提问作者Yogendra Kumar