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

Question

I want to redirect to another page in react if the user is not logged in and no token is set. For this im trying to use the Navigate option from react-router-dom Version: 6.0.2 like the old Redirect option. But i get the Error: [Navigate] is not a component. All component children of must be a or <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;

Im not sure how to use the "Navigate" property since i looked it up and found a answer which said i only have to replace the old "Redirect" property with "Navigate".

Answer 1

As long as i know, in react-router v6 <Route> it's the only component that's able to be child of <Routes>

you can change this code

{this.state.token && (<Navigate from="/auth" to="/competition" exact />)}

to

<Route path="/auth" element={this.state.token ? <Navigate to="/competition" /> : AuthPage}