title: Pass State to Private Nested Routes on React Router v6
body: <p>So, I have set up my React app routing using React Router v6 with nested Routes.</p>
  <p>The problem is that when I access any of my Private routes (defined as follows) I lose the state of the session, losing info such as the query params and the referrer (previous path) and I can't seem to figure route how I can pass this state to my Private route component to the children routes.</p>
  <p>This is my routing configuration:</p>
  <p><strong>App.js:</strong></p>
  <pre><code>import routes from './routes';
  
  const App = () =&gt; {
      const routing = useRoutes(routes);
  
      return (
          &lt;ThemeProvider theme={theme}&gt;
              &lt;UserProvider&gt;
                      &lt;GlobalStyles /&gt;
                      {routing}
              &lt;/UserProvider&gt;
          &lt;/ThemeProvider&gt;
      );
  };
  export default App;
  </code></pre>
  <p><strong>Index.js:</strong></p>
  <pre><code>import App from './App';
  
  ReactDOM.render((
    &lt;BrowserRouter&gt;
      &lt;App /&gt;
    &lt;/BrowserRouter&gt;
  ), document.getElementById('root'));
  </code></pre>
  <p><strong>Routes.js:</strong></p>
  <p>The console.log(location) shows the location.state empty</p>
  <pre><code>const Private = ({ component: Component, ...rest }) =&gt; {
  
    const [state] = React.useContext(UserContext);
  
    const location = useLocation()
    const path = location.pathname
  
    console.log(location)
    if (state.auth){
      console.log('Authenticated');
      return &lt;Component {...rest} /&gt;
    }
      
    else {
      console.log('Not Authenticated')
      return &lt;Navigate to = {'/login?from=' + path} /&gt;
    }
    
  
  };
  
  
  const routes = [
    {
      path: 'app',
      element: &lt;Private component={DashboardLayout} /&gt;,
      children: [
        {
          path: 'account', children: [
            { path: 'integrations', element: &lt;Integrations /&gt; },
          ]
        },
        { path: 'dashboard', element: &lt;Dashboard /&gt; },
        { path: 'audiences', element: &lt;Audiences /&gt; },
        { path: 'creatives', element: &lt;Creatives /&gt; },
        { path: 'copywriting', element: &lt;Copywriting /&gt; },
  
  
        { path: 'settings', element: &lt;ProjectSettings /&gt; },
        { path: 'user_settings', element: &lt;UserSettings /&gt; },
        
        { path: 'fb_interests', element: &lt;FbInterestsExplorer /&gt; },
        { path: '*', element: &lt;NotFound /&gt; },
      ]
    },
    {
      path: '/',
      element: &lt;MainLayout /&gt;,
      children: [
        { path: 'login', element: &lt;Login /&gt; },
        { path: 'user/activate/:user_id', element: &lt;UserConfirmation /&gt; },
        { path: '/', element: &lt;Navigate to=&quot;/app/dashboard&quot; /&gt; },
        { path: '*', element: &lt;NotFound /&gt; }
      ]
    }
  ];
  
  export default routes;
  </code></pre>
  <p><strong>DashboardLayout.js</strong></p>
  <pre><code>const DashboardLayout = () =&gt; {
    const [isMobileNavOpen, setMobileNavOpen] = useState(false);
  
    return (
      &lt;DashboardLayoutRoot&gt;
        &lt;DashboardNavbar onMobileNavOpen={() =&gt; setMobileNavOpen(true)} /&gt;
        &lt;DashboardSidebar
          onMobileClose={() =&gt; setMobileNavOpen(false)}
          openMobile={isMobileNavOpen}
        /&gt;
        &lt;DashboardLayoutWrapper&gt;
          &lt;DashboardLayoutContainer&gt;
            &lt;DashboardLayoutContent&gt;
              &lt;Outlet /&gt;
            &lt;/DashboardLayoutContent&gt;
          &lt;/DashboardLayoutContainer&gt;
        &lt;/DashboardLayoutWrapper&gt;
      &lt;/DashboardLayoutRoot&gt;
    );
  };
  
  export default DashboardLayout;
  </code></pre>