为什么无法在React中使用Routter Inceproute？

Question

我有一个React应用程序，在该应用程序中，用户只能在登录/注册后访问主页。 我已经使用了protectRoutes来实现此功能，但是我在路由器组件中获取以下错误：

A <Route> is only ever to be used as the child of <Routes> element, never rendered directly. Please wrap your <Route> in a <Routes>.

app.js文件的代码：

import {useState} from 'react'
import './App.css';
import {Routes,Route,Link} from 'react-router-dom'
import SignupPage from './Pages/SignupPage';
import LoginPage from './Pages/LoginPage';
import Homepage from './Pages/Homepage';
import PrivateRoute from "./Pages/PrivateRoute";
import {HashRouter as Router} from 'react-router-dom'
function App() {
  const [username,setUsername]=useState("");
  const [currentUser,setCurrentUser]=useState({});
  return (
    <Router>
    <div className="App">
     <Route path="/" exact element={<SignupPage></SignupPage>}/>
     <Route path="/signup" exact element={<SignupPage currentuser={currentUser} setcurrentuser={setCurrentUser} setusername={setUsername}></SignupPage>}/>
     <Route path="/login" exact element={<LoginPage></LoginPage>}/>
     <PrivateRoute path="/homepage" exact currentuser={currentUser} element={<Homepage user={currentUser} username={username} setusername={setUsername}></Homepage>}/>
    </div>
    </Router>

  );
}

export default App;

这里的错误以及如何修复？

Answer 1

问题

您是直接渲染路由组件，并且不会将它们包裹在路由组件中。

解决方案

重构私有组件渲染otlet组件，而不是Route，并包装要保护的路由。

例子：

import { Navigate, Outlet } from 'react-router-dom';

const PrivateRoute = ({ currentuser }) => {
  // auth business logic

  return isAuthenticated
    ? <Outlet />
    : <Navigate to="/login" replace />;
};

...

import { HashRouter as Router, Routes, Route, Link} from 'react-router-dom'

function App() {
  const [username,setUsername]=useState("");
  const [currentUser,setCurrentUser]=useState({});
  return (
    <Router>
      <div className="App">
        <Routes>
          ... unprotected routes ...
          <Route path="/" element={<SignupPage />} />
          <Route
            path="/signup"
            element={(
              <SignupPage
                currentuser={currentUser}
                setcurrentuser={setCurrentUser}
                setusername={setUsername}
              />
            )}
          />
          <Route path="/login" element={<LoginPage />} />
          ...

          <Route element={<PrivateRoute currentuser={currentUser} />}>
            ... protected routes ...
            <Route
              path="/homepage"
              element={(
                <Homepage
                  user={currentUser}
                  username={username}
                  setusername={setUsername}
                />
              )}
            />
            ...
          </Route>
        </Routes>
      </div>
    </Router>
  );
}