Uncaught error: [PublicRoute] is not a component. All component children of must be a or

Question

I want to implement <PublicRoute> component, inside <Routes> but the following error keeps occurring:

Uncaught error: [PublicRoute] is not a component. All component children of must be a or <React.Fragment>

Dependencies: "react": "^18.2.0", "react-router": "^6.4.3"

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 PrivateRoute from './components/PrivateRoute';
import Home from './pages/Home';
import PublicRoute from './components/PublicRoute';

function App() {
  return (
    <Routes>
      <PublicRoute path="/signin" element={<SignIn />} />
      <PrivateRoute path="/" element={<Home />} />
    </Routes>
  );
}

export default App;

PublicRoute.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;

index.js

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <BrowserRouter>
    <App />
  </BrowserRouter>
);

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

 <Routes>
  <Route exact path="/" element={<PrivateRoute />}>
    <Route exact path="/" element={<Home />} />
  </Route>
  <Route exact path="/signin" element={<PublicRoute />}>
    <Route exact path="/signin" element={<SignIn />} />
  </Route>
</Routes>

After implementing this solution, I get different error:

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

I encapsulated the <Route> in PublicRoute.js, inside the <Routes></Routes> and thanks to that the error resolved.

 return (
    <Routes>
      <Route {...routeProps}>{children}</Route>
    </Routes>
  );

But still, the data is not showing and there's a warning in console instead :

You rendered descendant <Routes> (or called useRoutes()) at "/signin" (under <Route path="/signin">) but the parent route path has no trailing "*". This means if you navigate deeper, the parent won't match anymore and therefore the child routes will never render. Please change the parent <Route path="/signin"> to <Route path="/signin/*">.

I did the changes as suggested, and now there're no errors or warnings but still the data is not shown on webpage.

Answer 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;