如何在Material-ui与React Router 4中点击模态框/折叠面板时修改URL且不跳转页面

我刚好做过几乎一模一样的需求，咱们一步步来搞定这个问题——核心就是用React Router管理URL变化，同时用组件状态控制Modal/Collapse的显示，避免页面跳转刷新。

核心思路 #

之前你点击ListItem会跳转到新页面，大概率是直接用了Link组件或者原生a标签导航到新路由。现在要改成：

• 点击ListItem时，通过React Router的API更新URL，但不跳转页面
• 用组件状态控制Modal/Collapse的显示/隐藏
• 监听URL变化，同步更新状态（比如用户手动改URL、浏览器前进后退时也能对应打开正确的详情）

具体实现步骤 #

1. 准备依赖与基础配置 #

首先确保你的项目已经安装了react-router-dom，然后在根组件配置好BrowserRouter（比如在App.js里包裹路由内容）。

2. 编写组件逻辑（以Modal为例） #

下面是一个完整的示例组件，包含List、ListItem和Modal，同时处理URL更新：

import { useState, useEffect } from 'react';
import { useNavigate, useLocation } from 'react-router-dom';
import { List, ListItem, ListItemText, Modal, Box, Typography, Button } from '@mui/material';

// 模拟列表数据
const items = [
  { id: 1, title: 'Item 1', detail: '这是Item 1的详细内容，支持多行文本和自定义样式哦～' },
  { id: 2, title: 'Item 2', detail: 'Item 2的详情信息，可以在这里展示更多说明、图片或者操作按钮' },
  { id: 3, title: 'Item 3', detail: 'Item 3的专属详情区域，按需渲染内容即可' },
];

const ItemList = () => {
  const navigate = useNavigate();
  const location = useLocation();
  const [selectedItem, setSelectedItem] = useState(null);
  const [isModalOpen, setIsModalOpen] = useState(false);

  // 监听URL变化，自动匹配并打开对应的Modal
  useEffect(() => {
    const pathSegments = location.pathname.split('/');
    const itemId = pathSegments[pathSegments.length - 1];
    if (itemId && !isNaN(Number(itemId))) {
      const targetItem = items.find(i => i.id === Number(itemId));
      setSelectedItem(targetItem);
      setIsModalOpen(true);
    } else {
      setIsModalOpen(false);
      setSelectedItem(null);
    }
  }, [location.pathname]);

  // 处理ListItem点击事件
  const handleItemClick = (item) => {
    // 更新URL到详情路径
    navigate(`/item/${item.id}`);
    // 这里也可以直接设置状态，不过useEffect会监听URL变化自动同步，二选一即可
    // setSelectedItem(item);
    // setIsModalOpen(true);
  };

  // 关闭Modal时重置URL和状态
  const handleCloseModal = () => {
    navigate('/'); // 回到列表页面的根路径
    setIsModalOpen(false);
    setSelectedItem(null);
  };

  return (
    <div>
      <List sx={{ maxWidth: 600, margin: '0 auto' }}>
        {items.map(item => (
          <ListItem 
            key={item.id} 
            button 
            onClick={() => handleItemClick(item)}
            sx={{ cursor: 'pointer', '&:hover': { bgcolor: '#f0f0f0' } }}
          >
            <ListItemText primary={item.title} />
          </ListItem>
        ))}
      </List>

      {/* 详情Modal */}
      <Modal
        open={isModalOpen}
        onClose={handleCloseModal}
        aria-labelledby="modal-title"
        aria-describedby="modal-description"
      >
        <Box sx={{ 
          position: 'absolute', 
          top: '50%', 
          left: '50%', 
          transform: 'translate(-50%, -50%)',
          width: 500,
          bgcolor: 'background.paper',
          borderRadius: 2,
          boxShadow: 24,
          p: 4,
        }}>
          <Typography id="modal-title" variant="h5" component="h2" mb={2}>
            {selectedItem?.title}
          </Typography>
          <Typography id="modal-description" variant="body1" color="text.secondary">
            {selectedItem?.detail}
          </Typography>
          <Button 
            variant="contained" 
            onClick={handleCloseModal} 
            sx={{ mt: 3 }}
          >
            关闭详情
          </Button>
        </Box>
      </Modal>
    </div>
  );
};

export default ItemList;

3. 如果用Collapse组件的适配 #

如果要换成Collapse展开详情，逻辑类似，只是把Modal换成Collapse，用expandedId控制哪个Item的折叠面板展开：

// 部分关键代码修改
import { Collapse, Box, Typography } from '@mui/material';

const [expandedId, setExpandedId] = useState(null);

// 监听URL更新同步折叠状态
useEffect(() => {
  const pathSegments = location.pathname.split('/');
  const itemId = pathSegments[pathSegments.length - 1];
  if (itemId && !isNaN(Number(itemId))) {
    setExpandedId(Number(itemId));
  } else {
    setExpandedId(null);
  }
}, [location.pathname]);

const handleItemClick = (item) => {
  const newExpandedId = expandedId === item.id ? null : item.id;
  // 同步更新URL：展开时设置详情路径，收起时回到根路径
  navigate(newExpandedId ? `/item/${item.id}` : '/');
  setExpandedId(newExpandedId);
};

// ListItem和Collapse的渲染部分
<List sx={{ maxWidth: 600, margin: '0 auto' }}>
  {items.map(item => (
    <div key={item.id}>
      <ListItem 
        button 
        onClick={() => handleItemClick(item)}
        sx={{ cursor: 'pointer', '&:hover': { bgcolor: '#f0f0f0' } }}
      >
        <ListItemText primary={item.title} />
      </ListItem>
      <Collapse in={expandedId === item.id}>
        <Box sx={{ p: 3, bgcolor: '#f5f5f5', borderTop: '1px solid #e0e0e0' }}>
          <Typography variant="body1" color="text.secondary">
            {item.detail}
          </Typography>
        </Box>
      </Collapse>
    </div>
  ))}
</List>

关键注意点 #

• 不要用Link组件直接包裹ListItem，而是手动调用navigate更新URL，避免触发页面跳转
• 一定要监听location的变化，这样用户通过浏览器前进后退操作时，Modal/Collapse能同步响应状态
• 如果你的路由有嵌套结构，要注意URL的路径匹配规则，确保能正确提取Item的ID

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