title: Configuring Routes as an Object in nestedRoute in v6 but there is no rendering of child component
body: <p>I'm new to react and trying to do nested Routing as an object and also passing custom child props to the parent route but nothing is happening, also I'm following this from an udemy course that uses react v5 version</p>
  <p>my App.js looks like this</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>function App(props) {
    useEffect(() =&gt; {
      store.dispatch(setCurrentUser())
    }, [])
  
    return (
      &lt;Provider store={store}&gt;
        &lt;Router&gt;
          &lt;Routes&gt;
            &lt;Route exact path="/" element={&lt;Landing/&gt;} /&gt;
            &lt;Route exact path="/" element={&lt;ProtectedRoute/&gt;}&gt;  
              &lt;Route  
                path="/dashboard" 
                element={&lt;Dashboard {...props} nestedRoute={Home} /&gt;} 
              /&gt;
              &lt;Route  
                path="/dashboard/addProduct" 
                element={&lt;Dashboard {...props} nestedRoute={AddProduct} /&gt;} 
              /&gt;
              &lt;Route  
                path="/dashboard/products" 
                element={&lt;Dashboard {...props} nestedRoute={Product} /&gt;} 
              /&gt;
            &lt;/Route&gt;
            &lt;Route exact path="/register" element={&lt;Register/&gt;} /&gt;
            &lt;Route exact path="/login" element={&lt;Login/&gt;} /&gt;
          &lt;/Routes&gt;
        &lt;/Router&gt;
      &lt;/Provider&gt;
  
    );
  }</code></pre>
  </div>
  </div>
  </p>
  <p>and the dashboard.js like this</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>class Dashboard extends Component {
    constructor(props) {
      super(props);   
      this.state = {
        child: props.nestedRoute,
        search: "",
      };
    }
  
    componentDidMount() {
      this.activeNav();
    }
  
    activeNav() {
      const pathname = window.location.pathname;
      const possibleRoutes = [
        { routes: "/dashboard", targetId: "home" },
        { routes: "/addProduct", targetId: "addProduct" },
        { routes: "/products", targetId: "products" },
        { routes: "/profile", targetId: "profile" },
      ];
      possibleRoutes.forEach(({ route, targetId }) =&gt; {
        window.jQuery(`#${targetId}`).removeClass("active");
        if (route === pathname) {
          window.jQuery(`#${targetId}`).addClass("active");
        }
      });
    }
    
      render() {
      const Child = this.state.child
      console.log(Child)
      const { user } = this.props.auth;
  
      return (
        &lt;div&gt;
          &lt;div className="wrapper"&gt;
            &lt;div id="content-wrapper" className="d-flex flex-column"&gt;
              &lt;div id="content"&gt;
                &lt;nav className="navbar navbar-expand navbar-light bg-white topbar mb-44 static-top shadow"&gt;
                  &lt;button
                    id="sidebarToggleTop"
                    className="btn btn-link rounded-circle mr-3"
                  &gt;
                    &lt;i className="fa fa-bars"&gt;&lt;/i&gt;
                  &lt;/button&gt;
  
                  &lt;form className="d-none d-sm-inline-block form-inline mr-auto ml-md-3 my-2 my-md-0 mw-100 navbar-search"&gt;
                    &lt;div className="input-group"&gt;
                      &lt;input
                        type="text"
                        className="form-control bg-light border-0 small"
                        placeholder="Search for..."
                        aria-label="Search"
                        aria-describedby="basic-addon2"
                      /&gt;
                      &lt;div className="input-group-append"&gt;
                        &lt;button className="btn btn-primary" type="button"&gt;
                          &lt;i className="fas fa-search fa-sm"&gt;&lt;/i&gt;
                        &lt;/button&gt;
                      &lt;/div&gt;
                    &lt;/div&gt;
                  &lt;/form&gt;
  
                  &lt;ul className="navbar-nav ml-auto"&gt;
                    &lt;li className="nav-item dropdown no-arrow d-sm-none"&gt;
                      &lt;Link
                        className="nav-link dropdown-toggle"
                        to="#"
                        id="searchDropdown"
                        role="button"
                        data-toggle="dropdown"
                        aria-haspopup="true"
                        aria-expanded="false"
                      &gt;
                        &lt;i className="fas fa-search fa-fw"&gt;&lt;/i&gt;
                      &lt;/Link&gt;
  
                      &lt;div
                        className="dropdown-menu dropdown-menu-right p-3 shadow animated--grow-in"
                        aria-labelledby="searchDropdown"
                      &gt;
                        &lt;form className="form-inline mr-auto w-100 navbar-search"&gt;
                          &lt;div className="input-group"&gt;
                            &lt;input
                              type="text"
                              className="form-control bg-light border-0 small"
                              placeholder="Search for..."
                              aria-label="Search"
                              aria-describedby="basic-addon2"
                            /&gt;
                            &lt;div className="input-group-append"&gt;
                              &lt;button className="btn btn-primary" type="button"&gt;
                                &lt;i className="fas fa-search fa-sm"&gt;&lt;/i&gt;
                              &lt;/button&gt;
                            &lt;/div&gt;
                          &lt;/div&gt;
                        &lt;/form&gt;
                      &lt;/div&gt;
                    &lt;/li&gt;
  
                    &lt;li className='nav-item dropdown no-arrow'&gt;
                      &lt;Link
                        className="nav-link dropdown-toggle"
                        to="#"
                        id="userDropdown"
                        role="button"
                        data-toggle="dropdown"
                        aria-haspopup="true"
                        aria-expanded="false"
                      &gt;
                        &lt;span className="mr-2 d-none d-lg-inline text-gray-600 small"&gt;
                          {user.name}
                        &lt;/span&gt;
                        &lt;Avatar size={40}&gt;
                          {user.name &amp;&amp; this.avatarText(user.name)}
                        &lt;/Avatar&gt;
                      &lt;/Link&gt;
  
                      &lt;div
                        className="dropdown-menu dropdown-menu-right shadow animated--grow-in"
                        aria-labelledby="userDropdown"
                      &gt;
                        &lt;Link className="dropdown-item" to="#"&gt;
                          &lt;i className="fas fa-user fa-sm fa-fw mr-2 text-gray-400"&gt;&lt;/i&gt;
                          Profile
                        &lt;/Link&gt;
                        &lt;Link className="dropdown-item" to="#"&gt;
                          &lt;i className="fas fa-cogs fa-sm fa-fw mr-2 text-gray-400"&gt;&lt;/i&gt;
                          Settings
                        &lt;/Link&gt;
                        &lt;Link className="dropdown-item" to="#"&gt;
                          &lt;i className="fas fa-list fa-sm fa-fw mr-2 text-gray-400"&gt;&lt;/i&gt;
                          Activity Log
                        &lt;/Link&gt;
                        &lt;div className="dropdown-divider"&gt;&lt;/div&gt;
                        &lt;Link
                          className="dropdown-item"
                          to="#"
                          onClick={this.logUserOut}
                        &gt;
                          &lt;i className="fas fa-sign-out-alt fa-sm fa-fw mr-2 text-gray-400"&gt;&lt;/i&gt;
                          Logout
                        &lt;/Link&gt;
                      &lt;/div&gt;
                    &lt;/li&gt;
                  &lt;/ul&gt;
                &lt;/nav&gt;
                &lt;Child {...this.props} search={this.state.search} /&gt;
              &lt;/div&gt;
            &lt;/div&gt;
            &lt;/div&gt;
      );
    }
  }
  
  Dashboard.propTypes = {
    auth: PropTypes.object.isRequired,
    logout: PropTypes.func.isRequired,
  };
  
  const mapStateToProps = (state) =&gt; ({
    auth: state.auth,
  });
  
  export default connect(mapStateToProps, { logout })(Dashboard);</code></pre>
  </div>
  </div>
  </p>
  <p>and one of the child route product.js looks like this</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>import React, { Component } from 'react'
  
  export default class Product extends Component {
      render() {
          return (
              &lt;div&gt;
                  Products
              &lt;/div&gt;
          )
      }
  }</code></pre>
  </div>
  </div>
  </p>