title: React routing within another component V6
body: <p>Im using Reavt V6 route.</p>
  <p>Im struggeling to get my routes inside gamecomponent to work.</p>
  <p>visiting /test results in a completly blank page. while it should load crime module within gamecomponent.
  visiting / renders gamecomponent, but /test does not render gamecomponent and the route within that.</p>
  <p>How do i make this to work?</p>
  <p>visiting url /crime should result in <code>gamecomponent</code> beeing loaded, and that</p>
  <pre><code>&lt;Route path=&quot;/test&quot; element={&lt;Crime /&gt;} /&gt;
  </code></pre>
  <p>should be loaded.</p>
  <p>app.js</p>
  <pre><code>import React from 'react';
  import logo from './logo.svg';
  import './App.css';
  import GameComponent from './gameComponent.jsx';
  import { BrowserRouter as Router } from 'react-router-dom';
  import { Routes, Route, Navigate, Outlet, Switch } from 'react-router-dom';
  import PrivateRoute from './PrivateRoute';
  import Login from './components/login/login.jsx';
  
  
  
  function App() {
      
    return (
  
    &lt;Router&gt;
      &lt;Routes&gt;
         &lt;Route path=&quot;/login&quot; element={&lt;Login /&gt;} /&gt;
         &lt;PrivateRoute  isAuth={true} path=&quot;/&quot; component={GameComponent}  redirectTo='/login'/&gt;
      &lt;/Routes&gt;
    &lt;/Router&gt;
    );
  }
  export default App;
  </code></pre>
  <p><strong>privateroute:</strong></p>
  <pre><code>import React from 'react';
  import PropTypes from 'prop-types';
  import { Route, Navigate } from 'react-router-dom';
  import { useNavigate  } from &quot;react-router-dom&quot;;
  import Login from './components/login/login.jsx';
  import GameComponent from './gameComponent.jsx';
  
  
  const PrivateRoute = ({ component: Component, redirectTo, isAuth, path, ...props }) =&gt; {
      //isAuth = false;
      
      if(!isAuth) {
          return &lt;Navigate to={redirectTo} /&gt;;
      }
      return &lt;Route path={path} element={&lt;Component /&gt;} /&gt;
  };
  
  export default PrivateRoute;
  </code></pre>
  <p><strong>gamecomponent:</strong></p>
  <pre><code>import React, {Component} from 'react';
  //import Component from 'react-dom';
  import SideBarRight from './components/game/sideBarRight.jsx';
  import SideBarLeft from './components/game/sideBarLeft.jsx';
  import Crime from './components/game/crime.jsx';
  import Login from './components/login/login.jsx';
  import './gameComponent.css';
  import { BrowserRouter as Router, Routes, Route, Link } from 'react-router-dom';
  import { BrowserRouter} from &quot;react-router-dom&quot;;
  
  
  class GameComponent extends Component{
   constructor() {
      super();
      this.state = {
      userData: {
          user: {cash:0, bank:0, weapon:'', username: 'test', locationname: 'Bankok',
          defence: 0},
          rankbar: {rankpercent: 50, rank: 'Mafia'},
          }
      }
      
      
      
      
    }
  
  
  render() {
      return (
      &lt;div className=&quot;main&quot;&gt;
      &lt;div className=&quot;sidebar left&quot;&gt;
                  &lt;SideBarLeft/&gt;
  
      &lt;/div&gt;
      &lt;div className=&quot;middleContentHolder&quot;&gt;
       &lt;Route path=&quot;/&quot; element={&lt;Crime /&gt;} /&gt;
      &lt;Route path=&quot;/test&quot; element={&lt;Crime /&gt;} /&gt;
      &lt;Route path=&quot;/crime&quot; element={&lt;Crime /&gt;} /&gt;
      &lt;Route path=&quot;/test2&quot; element={&lt;SideBarRight UserData={this.state.userData} /&gt;} /&gt;
  
  
          &lt;div className=&quot;col-8&quot;&gt;
              &lt;div className=&quot;content&quot;&gt;
              &lt;div className=&quot;header&quot;&gt;&lt;span&gt;Test...&lt;/span&gt;&lt;/div&gt;
              
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;div className=&quot;sidebar right&quot;&gt;
          &lt;SideBarRight UserData={this.state.userData}/&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      );
    }
      
  }
  
  
  
  export default GameComponent;
  </code></pre>