title: Protected route in react-router-dom v6
body: <p>I am trying to protect a component. At the time of logging I am storing the value of token in session Storage. I was trying the process that if any token value is present, then the protected page can be visited, otherwise not.</p>
  <p>Code of Routes.js:</p>
  <pre><code>import React from 'react';
  
  import {Route,Routes,BrowserRouter as Router} from 'react-router-dom';
  
  import { Navigate } from 'react-router-dom';
  
  import Home from '../Components/Home/Home';
  
  import About from '../Components/About/About';
  
  import Header from '../Layout/Navigation/Header';
  
  import {Reg} from '../Authentication/Registration/Reg';
  
  import { Login } from '../Authentication/Login/Login';
  
  const RootRoute = () =&gt; {
      
      return (
          &lt;Router&gt;
              &lt;Header/&gt;
              
              &lt;Routes&gt;
                 &lt;Route path=&quot;&quot; element={&lt;Home /&gt;}&gt;&lt;/Route&gt;
  
                 &lt;Route path=&quot;about/*&quot; element={window.sessionStorage.getItem('Token') ? &lt;About /&gt;: &lt;Navigate to=&quot;/login&quot; &gt;&lt;/Navigate&gt;}&gt;&lt;/Route&gt;  
                                                
                &lt;Route path=&quot;reg&quot; element={&lt;Reg /&gt;}&gt;&lt;/Route&gt;
  
                 &lt;Route path=&quot;login&quot; element={&lt;Login /&gt;}&gt;&lt;/Route&gt;
  
               &lt;/Routes&gt; 
               
          &lt;/Router&gt;
      )
  }
  
  export default RootRoute
  </code></pre>
  <p>Code of Header.js</p>
  <pre><code>import React from 'react';
  
  import {Navbar,Nav,Container,NavDropdown} from 'react-bootstrap';
  
  import {Link,useNavigate} from 'react-router-dom';
  
  import './Header.css';
  
  const Header = () =&gt; {
  
      const navigate=useNavigate();
  
      const logout=()=&gt;{
        window.sessionStorage.clear();
        navigate('/login');
    }
  
      return (
          &lt;&gt;
              &lt;Navbar bg=&quot;dark&quot; variant=&quot;dark&quot;&gt;
              &lt;Container&gt;
                  &lt;Navbar.Brand href=&quot;/&quot;&gt;Document&lt;/Navbar.Brand&gt;
                     &lt;Nav className=&quot;me-auto&quot;&gt;
  
                          &lt;Nav.Link as={Link} to=&quot;/&quot;&gt;Home&lt;/Nav.Link&gt;
                         
                          &lt;Nav.Link as={Link} to=&quot;about&quot;&gt;About us&lt;/Nav.Link&gt;
                          
                          &lt;NavDropdown title=&quot;Sign In&quot; id=&quot;basic-nav-dropdown&quot;&gt;
                             &lt;NavDropdown.Item as={Link} to=&quot;reg&quot;&gt;Regration&lt;/NavDropdown.Item&gt;
                             &lt;NavDropdown.Item as={Link} to=&quot;login&quot;&gt;Login&lt;/NavDropdown.Item&gt;
                           &lt;/NavDropdown&gt;
                          &lt;button onClick={logout} className=&quot;logout&quot;&gt;Log Out&lt;/button&gt;
                    &lt;/Nav&gt;
               &lt;/Container&gt;
              &lt;/Navbar&gt;
          &lt;/&gt;
      )
  }
  
  export default Header
  </code></pre>
  <p>But whenever I am clicking About us in navbar, it is redirecting to login though the token is present. Please help, how to do that?</p>