Quiero redirigir a otra página en reacción si el usuario no ha iniciado sesión y no se ha establecido ningún token. Para esto, estoy tratando de usar la opción Navegar de react-router-dom Versión: 6.0.2 como la antigua opción Redireccionar. Pero aparece el error: [Navegar] no es un componente. Todos los elementos secundarios de deben ser a o <React.Fragment>.

 import "./App.css"; import { BrowserRouter, Route, Routes, Navigate } from "react-router-dom"; import AuthPage from "./pages/Auth"; import CompetitionPage from "./pages/Competitions"; import ConditionsPage from "./pages/Conditions"; import JudgesPage from "./pages/Judges"; import StartPage from "./pages/Start"; import WinnersPage from "./pages/Winners"; import AuthContext from "./context/auth-context"; import SubmissionPage from "./pages/Submission"; import MainNavigation from "./components/navigation/MainNavigation.js"; import React, { Component } from "react"; class App extends Component { state = { token: null, userId: null, }; login = (token, userId, tokenExpiration) => { this.setState({ token: token, userId: userId }); }; logout = () => { this.setState({ token: null, userId: null }); }; render() { return ( <BrowserRouter> <React.Fragment> <AuthContext.Provider value={{ token: this.state.token, userId: this.state.userId, login: this.login, logout: this.logout, }} > <MainNavigation /> <main className="main-content"> <Routes> {!this.state.token && <Navigate from="/" to="/auth" exact />} {this.state.token && ( <Navigate from="/" to="/competition" exact /> )} {this.state.token && ( <Navigate from="/auth" to="/competition" exact /> )} <Route exact path="/" element={StartPage} /> {!this.state.token && <Route path="/auth" element={AuthPage} />} <Route path="/competition" element={CompetitionPage} /> {this.state.token && ( <Route path="/submission" element={SubmissionPage} /> )} <Route path="/conditions" element={ConditionsPage} /> <Route path="/judges" element={JudgesPage} /> <Route path="/winners" element={WinnersPage} /> </Routes> </main> </AuthContext.Provider> </React.Fragment> </BrowserRouter> ); } } export default App;

No estoy seguro de cómo usar la propiedad "Navegar", ya que la busqué y encontré una respuesta que decía que solo tenía que reemplazar la antigua propiedad "Redireccionar" con "Navegar".