React应用报错Uncaught TypeError: useSelector is not a function求助

核心问题是你用require导入模块时，没有正确获取命名导出的成员。像useSelector、useMemo以及react-router-dom、MUI的组件都是命名导出，不是默认导出，直接赋值给变量会拿到整个模块对象，调用的时候自然不是函数。

修复步骤 #

所有命名导出的模块，改用解构方式从require返回的对象中提取成员：

修正后的导入代码 #

const { BrowserRouter, Navigate, Routes, Route } = require('react-router-dom');
const HomePage = require ('scenes/homePage');
const LoginPage = require ('scenes/loginPage');
const ProfilePage = require ('scenes/ProfilePage');
const { useMemo } = require ('react');
const { useSelector } = require ('react-redux');
const { CssBaseline, ThemeProvider } = require ('@mui/material');
const createTheme = require ('@mui/material/styles');
const themeSettings = require ('./theme');

完整修复后的App.js #

const { BrowserRouter, Navigate, Routes, Route } = require('react-router-dom');
const HomePage = require ('scenes/homePage');
const LoginPage = require ('scenes/loginPage');
const ProfilePage = require ('scenes/ProfilePage');
const { useMemo } = require ('react');
const { useSelector } = require ('react-redux');
const { CssBaseline, ThemeProvider } = require ('@mui/material');
const createTheme = require ('@mui/material/styles');
const themeSettings = require ('./theme');


function App() {
  const mode = useSelector((state) => state.mode);
  const theme = useMemo(() => createTheme(themeSettings(mode)), [mode]);
  const isAuth = Boolean(useSelector((state) => state.token));

  return (
    <div className="app">
      <BrowserRouter>
        <ThemeProvider theme={theme}>
          <CssBaseline />
          <Routes>
            <Route path="/" element={<LoginPage />} />
            <Route
              path="/home"
              element={isAuth ? <HomePage /> : <Navigate to="/" />}
            />
            <Route
              path="/profile/:userId"
              element={isAuth ? <ProfilePage /> : <Navigate to="/" />}
            />
          </Routes>
        </ThemeProvider>
      </BrowserRouter>
    </div>
  );
}

export default App;

额外建议 #

如果你的项目支持ES6语法，建议直接使用import语法，更清晰不易出错：

import { BrowserRouter, Navigate, Routes, Route } from 'react-router-dom';
import HomePage from './scenes/homePage';
import LoginPage from './scenes/loginPage';
import ProfilePage from './scenes/ProfilePage';
import { useMemo } from 'react';
import { useSelector } from 'react-redux';
import { CssBaseline, ThemeProvider } from '@mui/material';
import createTheme from '@mui/material/styles';
import themeSettings from './theme';

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