未捕获的错误：[PublicRoute] 不是 <Route> 组件。 <Routes> 的所有子组件必须是 <Route> 或 <React.Fragment>答案

【问题标题】：Uncaught error: [PublicRoute] is not a <Route> component. All component children of <Routes> must be a <Route> or <React.Fragment>未捕获的错误：[PublicRoute] 不是 <Route> 组件。 <Routes> 的所有子组件必须是 <Route> 或 <React.Fragment>
【发布时间】：2022-11-16 13:16:32
【问题描述】：

公共路由.js

> 
> import React from 'react';
> import { Navigate, Route } from 'react-router';
> 
> function PublicRoute({ children, ...routeProps }) {
> const profile = false;
> 
> if (profile) {
> return <Navigate to="/" />;
> > >   }
> 
> return <Route {...routeProps}>{children}</Route>;
> > > }
> 
> export default PublicRoute;

App.js
> import React from 'react';
> 
> import 'rsuite/dist/rsuite.min.css';
> import './styles/main.scss';
> import { Routes } from 'react-router';
> import SignIn from './pages/SignIn';
> import Home from './pages/Home';
> import PrivateRoute from './components/PrivateRoute';
> import PublicRoute from './components/PublicRoute';
> 
> function App() {
> return (
>     <Routes>
>       <PublicRoute exact path="/" element={<SignIn />} />
>       <PrivateRoute exact path="/" element={<Home />} />
>     </Routes>
>   );
> }
> 
> export default App;

索引.js：

从“反应”导入反应；从 'react-dom/client' 导入 ReactDOM；从'react-router-dom'导入{BrowserRouter}；从'./App'导入应用程序；

const root = ReactDOM.createRoot(document.getElementById('root')); root.render( );
I've been trying to render data on webpage. And as per the update, the <Switch> has been changed to <Routes> but the issue is, the data inside the <Route> is not being rendered on the webpage.
Can someone point out the cause/error regarding this?

I've also tried the following [solution](https://stackoverflow.com/questions/69864165/error-privateroute-is-not-a-route-component-all-component-children-of-rou) 
}> }/>
<路由精确路径='/login' element={}> <Route exact path='/singing' element={}/>
After implementing this solution, I get different error : 

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

【问题讨论】：

标签： reactjs routes create-react-app

【解决方案1】：

App.js
 import React from 'react';
 
 import 'rsuite/dist/rsuite.min.css';
 import './styles/main.scss';
 import SignIn from './pages/SignIn';
 import Home from './pages/Home';
 import PrivateRoute from './components/PrivateRoute';
 import PublicRoute from './components/PublicRoute';
 import { Route, Routes} from 'react-router-dom'

 
 function App() {
 return (
     <Routes>
       <Route exact path="/signIn" element={<SignIn />} />
       <Route exact path="/home" element={<Home />} />
     </Routes>
   ); 
}

 export default App;

【讨论】：