Navigate 不是 <Route> 组件。<Routes> 的所有子组件都必须是 <Route> 或 <React.Fragment>

Question

如果用户未登录且未设置令牌，我想重定向到反应中的另一个页面。为此，我尝试使用react-router-dom版本：6.0.2中的导航选项，就像旧的重定向选项一样。但我收到错误：[Navigate] 不是组件。的所有子组件必须是 a 或 <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;

我不确定如何使用“导航”属性，因为我查找了它并找到了一个答案，该答案说我只需用“导航”替换旧的“重定向”属性。

Answer 1

据我所知，在react-router v6中，<Route>它是唯一能够成为其子级的组件<Routes>

你可以改变这个代码

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

到

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