导航不是 <Route>零件.<Routes> 的所有子组件必须是 <Route>或 <React.Fragment> [英] Navigate is not a <Route> component. All component children of <Routes> must be a <Route> or <React.Fragment>

问题描述

如果用户未登录且未设置令牌，我想重定向到另一个页面进行响应.为此，我尝试使用 react-router-dom Version: 6.0.2 中的 Navigate 选项，就像旧的 Redirect 选项一样.但我收到错误:[导航] 不是组件.的所有子组件必须是 或 .

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".

推荐答案

据我所知，在 react-router v6 中，它是唯一能够成为 <代码><路由>

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

您可以更改此代码

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

到

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

这篇关于导航不是 &lt;Route&gt;零件.&lt;Routes&gt; 的所有子组件必须是 &lt;Route&gt;或 &lt;React.Fragment&gt;的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！