Блог

Недавно я столкнулся с проблемой с пользовательским маршрутом с последней версией react-router-dom 6 в моем коде. Я создал пользовательский маршрут для авторизованного пользователя, если пользователь не входит в систему, он перенаправится на страницу входа. Он работал с предыдущей версией маршрутизатора react, но теперь он сломался с последней версией. Я публикую код ниже.

Также появляется сообщение об ошибке ниже. [Маршрут пользователя] не является компонентом. Все дочерние компоненты должны быть маршрутом илиФрагментgt;

LoadingToRedirect.js

 import React, { useState, useEffect } from "react"; import { useNavigate } from "react-router-dom";  const LoadingToRedirect = () =gt; {  const [count, setCount] = useState(5);  const navigate = useNavigate();   useEffect(() =gt; {  const interval = setInterval(() =gt; {  setCount((currentCount) =gt; --currentCount);  }, 1000);   count === 0 amp;amp; navigate("/login");  return () =gt; clearInterval(interval);  }, [count, navigate]);  return (  lt;divgt;  lt;pgt;Redirecting you in {count} secondslt;/pgt;  lt;/divgt;  ); };  export default LoadingToRedirect;  

UserRoute.js

 import React from "react"; import { Route, Routes } from "react-router-dom"; import { useSelector } from "react-redux"; import LoadingToRedirect from "./LoadingToRedirect";  const UserRoute = ({ children, ...rest }) =gt; {  const { currentUser } = useSelector((state) =gt; state.user);  return currentUser ? lt;Route {...rest} /gt; : lt;LoadingToRedirect /gt;; };  export default UserRoute;  

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"; function App() {  const dispatch = useDispatch();   useEffect(() =gt; {  auth.onAuthStateChanged((authUser) =gt; {  if (authUser) {  dispatch(setUser(authUser));  } else {  dispatch(setUser(null));  }  });  }, [dispatch]);  return (  lt;BrowserRoutergt;  lt;div className="App"gt;  lt;Header /gt;  lt;ToastContainer position="top-center" /gt;  lt;Fragmentgt;  lt;Routesgt;  lt;UserRoute path="/" element={lt;Home /gt;} /gt;  lt;Route path="/login" element={lt;Login /gt;} /gt;  lt;Route path="/register" element={lt;Register /gt;} /gt;  lt;UserRoute path="/addContact" element={lt;AddEdit /gt;} /gt;  lt;/Routesgt;  lt;/Fragmentgt;  lt;/divgt;  lt;/BrowserRoutergt;  ); }  export default App;  

В react-маршрутизаторе v6 компонент «Маршруты» разрешает только дочерние маршруты.

В UserRoute.js если пользователя нет, вы возвращаете LoadingToRedirect:

 return currentUser ? lt;Route {...rest} /gt; : lt;LoadingToRedirect /gt;;  

Вы можете попробовать изменить это на:

 const UserRoute = ({ children, path, element }) =gt; {  const { currentUser } = useSelector((state) =gt; state.user);  return lt;Route path={path} element={ currentUser ? element : lt;LoadingToRedirect /gt;} /gt;; };