PrivateRoute rendering the blank page ...showing no errors in react js - reactjs

Question

routing_page..
i used 2 switch statement first for Route and second for PrivateRoute..
and after login and getting token in local storage....when i visit to the privateroute it shows blank page only.....
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import LoginPage from "./Pages/Login_page";
import {Route,Switch,BrowserRouter as Router} from "react-router-dom";
import SignupPage from "./Pages/signup_page";
import Noting_page from "./Pages/home_notingPage";
import INdividualNotes from './Pages/allNotesOfUser';
import Editing_page from './Pages/editingPage';
import PrivateRoute from './components/private';
ReactDOM.render(
<Router>
<Switch>
<Route exact path="/login"><LoginPage/></Route>
<Route path="/signup"><SignupPage/></Route>
<Switch>
<PrivateRoute path="/notes" component={INdividualNotes}/>
<PrivateRoute path="/home" component={Noting_page}/>
<PrivateRoute path="/login/edit" component={Editing_page}/>
</Switch>
</Switch>
</Router>,
document.getElementById('root')
);
Private.js
i am using token here for auth
import { render } from "#testing-library/react";
import React, { useEffect, useState } from "react";
import { Route ,useHistory,Redirect, useLocation, Switch} from "react-router-dom";
function PrivateRoute({component:component,...rest}){
return(
<Route {...rest}
render={ props=>
localStorage.getItem("token")?
<component {...props}/>
:
<Redirect to={{pathname:"/login",state:{from:props.location}}}/>
} />)
}
export default PrivateRoute;

Answer 1

I think it is something related to the naming convention of components. Your component is written in small letters. If you just change {component: Component} in PrivateRoute file and then where you using your component <component> replace this with <Component>, It will render the page. Perhaps it is not mentioned anywhere in official docs or maybe it is happening due to react-router plugin.