title: Navigate is not a <Route> component. All component children of <Routes> must be a <Route> or <React.Fragment>
body: <p>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 &lt;React.Fragment&gt;.</p>
  <pre><code>import &quot;./App.css&quot;;
  import { BrowserRouter, Route, Routes, Navigate } from &quot;react-router-dom&quot;;
  
  import AuthPage from &quot;./pages/Auth&quot;;
  import CompetitionPage from &quot;./pages/Competitions&quot;;
  import ConditionsPage from &quot;./pages/Conditions&quot;;
  import JudgesPage from &quot;./pages/Judges&quot;;
  import StartPage from &quot;./pages/Start&quot;;
  import WinnersPage from &quot;./pages/Winners&quot;;
  import AuthContext from &quot;./context/auth-context&quot;;
  import SubmissionPage from &quot;./pages/Submission&quot;;
  
  import MainNavigation from &quot;./components/navigation/MainNavigation.js&quot;;
  import React, { Component } from &quot;react&quot;;
  
  class App extends Component {
    state = {
      token: null,
      userId: null,
    };
  
    login = (token, userId, tokenExpiration) =&gt; {
      this.setState({ token: token, userId: userId });
    };
  
    logout = () =&gt; {
      this.setState({ token: null, userId: null });
    };
  
    render() {
      return (
        &lt;BrowserRouter&gt;
          &lt;React.Fragment&gt;
            &lt;AuthContext.Provider
              value={{
                token: this.state.token,
                userId: this.state.userId,
                login: this.login,
                logout: this.logout,
              }}
            &gt;
              &lt;MainNavigation /&gt;
              &lt;main className=&quot;main-content&quot;&gt;
                &lt;Routes&gt;
                  {!this.state.token &amp;&amp; &lt;Navigate from=&quot;/&quot; to=&quot;/auth&quot; exact /&gt;}
                  {this.state.token &amp;&amp; (
                    &lt;Navigate from=&quot;/&quot; to=&quot;/competition&quot; exact /&gt;
                  )}
                  {this.state.token &amp;&amp; (
                    &lt;Navigate from=&quot;/auth&quot; to=&quot;/competition&quot; exact /&gt;
                  )}
                  &lt;Route exact path=&quot;/&quot; element={StartPage} /&gt;
                  {!this.state.token &amp;&amp; &lt;Route path=&quot;/auth&quot; element={AuthPage} /&gt;}
                  &lt;Route path=&quot;/competition&quot; element={CompetitionPage} /&gt;
                  {this.state.token &amp;&amp; (
                    &lt;Route path=&quot;/submission&quot; element={SubmissionPage} /&gt;
                  )}
                  &lt;Route path=&quot;/conditions&quot; element={ConditionsPage} /&gt;
                  &lt;Route path=&quot;/judges&quot; element={JudgesPage} /&gt;
                  &lt;Route path=&quot;/winners&quot; element={WinnersPage} /&gt;
                &lt;/Routes&gt;
              &lt;/main&gt;
            &lt;/AuthContext.Provider&gt;
          &lt;/React.Fragment&gt;
        &lt;/BrowserRouter&gt;
      );
    }
  }
  
  export default App;
  
  </code></pre>
  <p>Im not sure how to use the &quot;Navigate&quot; property since i looked it up and found a <a href="https://stackoverflow.com/questions/63690695/react-redirect-is-not-exported-from-react-router-dom">answer</a> which said i only have to replace the old &quot;Redirect&quot; property with &quot;Navigate&quot;.</p>