PrivateRoute Ошибка: 'Маршрут должен использоваться только как дочерний элемент элемента <Routes> и никогда не отображаться напрямую. Пожалуйста, оберните ваш <Route> в <Routes>.

Когда я использую privateRoute вместо Route, возникает ошибка [PrivateRoute] не является компонентом Route. Поэтому я использую это решение, которое также выдает вышеуказанную ошибку маршрута. Нужно ли мне внести изменения в PrivateRoute.js

?

PrivateRoute.js ''' import {Route, Redirect} from 'react-router-dom'

            const PrivateRoute= ({children, ...rest}) =>{
                console.log('Private route works!')
                return(
                    <Route {...rest}>{children}</Route>
                )
            }

            export default PrivateRoute;

''''

App.js ''' import './App.css'; import {BrowserRouter as Router, Routes, Route, Navigate, Outlet } from 'react-router-dom' import PrivateRoute from './utils/PrivateRoute' import HomePage from './pages/HomePage' import LoginPage from './pages/LoginPage' import Header from './components/Header'

    function App() {
      return (
        <div className="App">
        <Router>
            <Header/>

            <Routes>
                <Route exact path='/' element={<PrivateRoute/>}>
                  <Route exact path='/' element={<HomePage/>}/>
                </Route>
                <Route exact path="/login" element={<LoginPage />} />

            </Routes>
        </Router>
        </div>
      );
    }

    export default App;

'''

Вернуться на верх