如何通过React Material UI Select组件实现页面跳转？

一、修复选择后页面不渲染的问题 #

1. 修正路由配置与父组件结构 #

确保Food作为父路由，BrandedFoods等页面作为子路由嵌套，且父组件中添加Outlet用于渲染子页面：

路由配置代码示例：

import { createBrowserRouter, RouterProvider, Outlet } from 'react-router-dom';
import Food from './components/Food';
import BrandedFoods from './components/BrandedFoods';

const router = createBrowserRouter([
  {
    path: '/food',
    element: <Food />,
    children: [
      {
        path: 'BrandedFoods',
        element: <BrandedFoods />,
      },
      // 其他食品分类的子路由
    ],
  },
]);

function App() {
  return <RouterProvider router={router} />;
}

Food组件需添加Outlet：

import { Outlet } from 'react-router-dom';

function Food() {
  return (
    <div>
      {/* Food组件自有内容 */}
      <Outlet /> {/* 子页面将渲染在此处 */}
    </div>
  );
}

2. 使用react-router的navigate触发跳转 #

不要用window.location.href，改用useNavigate钩子保证路由状态同步：

SelectFoodChange组件示例：

import { useNavigate } from 'react-router-dom';
import Select from '@mui/material/Select';
import MenuItem from '@mui/material/MenuItem';

function SelectFoodChange() {
  const navigate = useNavigate();

  const handleChange = (event) => {
    const selectedPath = event.target.value;
    navigate(`/food/${selectedPath}`);
  };

  return (
    <Select
      defaultValue=""
      onChange={handleChange}
      placeholder="选择食品分类"
    >
      <MenuItem value="BrandedFoods">品牌食品</MenuItem>
      {/* 其他选项 */}
    </Select>
  );
}

二、让Select组件始终可见 #

将SelectFoodChange组件放在路由结构的外层（如App组件或全局Layout中），脱离路由切换的影响：

App组件示例：

import { RouterProvider } from 'react-router-dom';
import SelectFoodChange from './components/SelectFoodChange';
import { router } from './router';

function App() {
  return (
    <div>
      {/* 放在最外层，始终显示 */}
      <div style={{ padding: '10px' }}>
        <SelectFoodChange />
      </div>
      <RouterProvider router={router} />
    </div>
  );
}

若需要导航栏样式，可结合Material UI的AppBar实现：

import { AppBar, Toolbar } from '@mui/material';
import { RouterProvider } from 'react-router-dom';
import SelectFoodChange from './components/SelectFoodChange';
import { router } from './router';

function App() {
  return (
    <div>
      <AppBar position="static">
        <Toolbar>
          <SelectFoodChange />
        </Toolbar>
      </AppBar>
      {/* 避开AppBar的占位空间 */}
      <Toolbar />
      <RouterProvider router={router} />
    </div>
  );
}

额外排查点 #

• 确认BrandedFoods组件无语法错误且正确导出
• 检查路由路径大小写是否与URL完全匹配（如BrandedFoods是否一致）
• 避免路由配置中重复定义相同路径导致冲突

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