如何在React-Router中根据屏幕尺寸配置不同路由结构？

你可以直接在路由定义中结合useMediaQuery钩子动态生成不同的路由规则，核心思路是根据屏幕尺寸条件渲染两种路由结构，同时确保组件内部的路由出口（Outlet）匹配对应层级。

实现步骤 #

1. 确认依赖：确保已安装react-responsive和最新版react-router-dom（v6+）
2. 动态生成路由配置：在路由文件中通过媒体查询判断屏幕尺寸，渲染对应结构的路由
3. 适配组件内的路由出口：在ChatList组件中根据屏幕尺寸决定是否渲染<Outlet/>（桌面端需要，移动端不需要）

代码示例 #

routes.tsx

import { Routes, Route } from 'react-router-dom';
import { useMediaQuery } from 'react-responsive';
import ChatList from './ChatList';
import ChatDetails from './ChatDetails';
import Home from './Home';

const AppRoutes = () => {
  // 判断是否为桌面端（宽度>1024px）
  const isDesktop = useMediaQuery({ minWidth: 1024 });

  return (
    <Routes>
      <Route path="/" element={<Home />} />
      
      {/* 桌面端路由结构：ChatList作为父路由，ChatDetails是子路由 */}
      {isDesktop ? (
        <Route path="chats" element={<ChatList />}>
          <Route path=":id" element={<ChatDetails />} />
        </Route>
      ) : (
        // 移动端路由结构：两个独立路由
        <>
          <Route path="chats" element={<ChatList />} />
          <Route path="chats/:id" element={<ChatDetails />} />
        </>
      )}

      <Route path="*" element={<div>404 Not Found</div>} />
    </Routes>
  );
};

export default AppRoutes;

ChatList.tsx

import { Link, Outlet, useParams } from 'react-router-dom';
import { useMediaQuery } from 'react-responsive';

const ChatList = () => {
  const isDesktop = useMediaQuery({ minWidth: 1024 });
  const { id } = useParams<{ id?: string }>();

  const chats = [
    { id: '1', name: '张三' },
    { id: '2', name: '李四' },
    { id: '3', name: '王五' },
  ];

  return (
    <div className="chat-list-container">
      <div className="chat-list">
        {chats.map(chat => (
          <Link
            key={chat.id}
            to={isDesktop ? `./${chat.id}` : `/chats/${chat.id}`}
            className={id === chat.id ? 'active' : ''}
          >
            {chat.name}
          </Link>
        ))}
      </div>

      {/* 桌面端才渲染子路由出口，显示ChatDetails */}
      {isDesktop && <Outlet />}
    </div>
  );
};

export default ChatList;

关键注意点 #

• 路由匹配优先级：通过条件渲染互斥的路由组，避免重复匹配导致的冲突
• 组件内的Outlet：桌面端ChatList作为父路由，必须渲染<Outlet/>才能加载子路由的ChatDetails；移动端无需此出口
• 导航链接一致性：确保跳转路径和路由定义完全对应，避免出现404错误

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