react-router-dom v6版本自定义路由报错[UserRoute]非合法Route组件问题

报错原因 #

[UserRoute] is not a component. All component children of must be a Route or <React.Fragment>

React Router v6 对<Routes>组件的直接子元素做了严格限制，仅允许原生<Route>或<React.Fragment>作为直接子组件，旧版写法中直接把自定义UserRoute放在<Routes>下的用法不再兼容。

修复步骤 #

1. 改写 UserRoute.js #

将自定义路由从返回<Route>组件的形式，改为权限校验包装组件，仅根据登录状态返回对应渲染内容：

// UserRoute.js
import React from "react";
import { useSelector } from "react-redux";
import LoadingToRedirect from "./LoadingToRedirect";

const UserRoute = ({ element }) => {
  const { currentUser } = useSelector((state) => state.user);
  return currentUser ? element : <LoadingToRedirect />;
};

export default UserRoute;

2. 修改 App.js 路由写法 #

所有需要权限校验的路由保留原生<Route>标签，将原有页面组件用UserRoute包裹后传入element属性即可：

// App.js
import React, { useEffect, Fragment } from "react";
import "./App.css";
import { BrowserRouter, Routes, Route } from "react-router-dom";
import Home from "./pages/Home";
import Login from "./pages/Login";
import Register from "./pages/Register";
import UserRoute from "./components/UserRoute";
import { useDispatch } from "react-redux";
import { auth } from "./firebase";
import { setUser } from "./redux/actions";
import Header from "./components/Header";
import AddEdit from "./pages/AddEdit";
// 补充缺失的ToastContainer导入（原有代码未导入直接使用会报错）
import { ToastContainer } from 'react-toastify';
import 'react-toastify/dist/ReactToastify.css';

function App() {
  const dispatch = useDispatch();

  useEffect(() => {
    auth.onAuthStateChanged((authUser) => {
      if (authUser) {
        dispatch(setUser(authUser));
      } else {
        dispatch(setUser(null));
      }
    });
  }, [dispatch]);
  return (
    <BrowserRouter>
      <div className="App">
        <Header />
        <ToastContainer position="top-center" />
        <Fragment>
          <Routes>
            <Route path="/" element={<UserRoute element={<Home />} />} />
            <Route path="/login" element={<Login />} />
            <Route path="/register" element={<Register />} />
            <Route path="/addContact" element={<UserRoute element={<AddEdit />} />} />
          </Routes>
        </Fragment>
      </div>
    </BrowserRouter>
  );
}

export default App;

3. LoadingToRedirect.js 无需修改 #

原有倒计时重定向逻辑完全兼容v6版本，不需要调整。

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