React Router点击导航抽屉URL变更但对应组件未渲染问题求助

问题根因 #

• Switch 组件仅支持直接将 Route 或 Redirect 作为子组件，才能正确根据当前路径匹配对应的路由。你将 Route 封装在自定义的 RoutesRender 组件内后，Switch 无法识别到内部的路由配置，只会将 RoutesRender 当作普通静态组件渲染，路由变化时不会触发重新匹配，自然不会更新视图。
• 你在 RoutesRender 组件渲染阶段直接调用 history.push 属于副作用操作，不符合React渲染规范，容易引发渲染异常。
• 你贴出的 Minidrawer 代码中没有从 withRouter 注入的props中解构 history 变量，直接调用全局的 history 也可能引发异常（如果你的代码实际运行时地址栏能更新，大概率是你贴代码时漏了解构步骤）。
• Minidrawer 中 itemsList 数组存在多余的闭合大括号和逗号，属于语法错误，需要清理。

修复方案 #

1. 重构Main组件路由逻辑 #

删除自定义的 RoutesRender 组件，直接在 Switch 下渲染 Route 组件，将鉴权逻辑移到 Route 的render回调中，同时引入 Redirect 组件处理鉴权跳转：

import { Switch, Route, Redirect } from "react-router-dom";
// 其他导入保持不变

const Main = (props) => {
    const classes = useStyles();

    return (
        <Box className={classes.box} sx={{ flexGrow: 1 }}>
            <Switch>
                {RoutesMaster.map((route, index) => (
                    <Route 
                        exact 
                        key={index} 
                        path={route.Path} 
                        render={(props) => {
                            // 鉴权逻辑
                            if (route.AuthRequired) {
                                return <Redirect to='/auth/login' />
                            }
                            return <route.Component {...props} />
                        }} 
                    />
                ))}
            </Switch>
        </Box>
    )
}

export default Main;

2. 修复Minidrawer组件的语法和变量问题 #

const Minidrawer = props => {
// 解构withRouter注入的history，以及其他父组件传递的属性
const { history, open, handleDrawerClose, theme } = props;
const itemsList = [
    {
      text: "Home",
      icon: <HomeIcon />,
      onClick: () => history.push("/")
    },
    {
      text: "My Cart",
      icon: <UserIcon />,
      onClick: () => history.push("/auth")
    },
    {
      text: "Register Client",
      icon: <GroupAddIcon />,
      onClick:() => history.push("/register-client")
    }
    // 删除多余的闭合大括号和逗号
  ];
// 其余渲染逻辑保持不变
}
export default withRouter(Minidrawer);

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