#javascript #jquery #reactjs #mern
#язык JavaScript #jquery #реагирует на #мерн
Вопрос:
Я новичок в реагировании и пытаюсь выполнять вложенную маршрутизацию как объект, а также передавать пользовательские дочерние реквизиты родительскому маршруту, но ничего не происходит, также я следую этому из курса udemy, который использует версию react v5
мой App.js выглядит так
function App(props) { useEffect(() =gt; { store.dispatch(setCurrentUser()) }, []) return ( lt;Provider store={store}gt; lt;Routergt; lt;Routesgt; 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;/Routegt; lt;Route exact path="/register" element={lt;Register/gt;} /gt; lt;Route exact path="/login" element={lt;Login/gt;} /gt; lt;/Routesgt; lt;/Routergt; lt;/Providergt; ); } и в dashboard.js вот так
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;divgt; 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;/igt; lt;/buttongt; 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;/igt; lt;/buttongt; lt;/divgt; lt;/divgt; lt;/formgt; 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;/igt; lt;/Linkgt; 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;/igt; lt;/buttongt; lt;/divgt; lt;/divgt; lt;/formgt; lt;/divgt; lt;/ligt; 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;/spangt; lt;Avatar size={40}gt; {user.name amp;amp; this.avatarText(user.name)} lt;/Avatargt; lt;/Linkgt; 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;/igt; Profile lt;/Linkgt; lt;Link className="dropdown-item" to="#"gt; lt;i className="fas fa-cogs fa-sm fa-fw mr-2 text-gray-400"gt;lt;/igt; Settings lt;/Linkgt; lt;Link className="dropdown-item" to="#"gt; lt;i className="fas fa-list fa-sm fa-fw mr-2 text-gray-400"gt;lt;/igt; Activity Log lt;/Linkgt; lt;div className="dropdown-divider"gt;lt;/divgt; 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;/igt; Logout lt;/Linkgt; lt;/divgt; lt;/ligt; lt;/ulgt; lt;/navgt; lt;Child {...this.props} search={this.state.search} /gt; lt;/divgt; lt;/divgt; lt;/divgt; ); } } Dashboard.propTypes = { auth: PropTypes.object.isRequired, logout: PropTypes.func.isRequired, }; const mapStateToProps = (state) =gt; ({ auth: state.auth, }); export default connect(mapStateToProps, { logout })(Dashboard); and one of the child route product.js looks like this
import React, { Component } from 'react' export default class Product extends Component { render() { return ( lt;divgt; Products lt;/divgt; ) } }