Ну не прям вже відходить, але є така тенденція - юзати контекст та useReducer замість нього. Але краще взяти mobx/MST та не знати горя, імхо

mobx MST

кто на хуках сидит плотно? шо юзаете для загрузки данных и глобального стейта?

юзаю кастомные хуки, которые работают с саспенсом

Леша, начинай вести блог в конце концов

а что делает саспенс?

я очень стараюсь начать, честно

посмотри как работает React.lazy

(тот самый throw Promise)

а есть где посмотреть?

+

Ребята привет, помогите новенькому, не получается настроить роуты
есть главный компонент с приложением в нем роут на страницу аккаунт

class App extends React.Component {

    render () {
        return (
            <Provider>
                <Router>
                    <Switch>
                      <Route exact path="/tools/meals/account" component={AccountPage} {...this.props}/>
                      <Route path="/tools/meals/plans" component={Plans}/>
                    </Switch>
                </Router>
            </Provider>
        );
    }
}

вот компонент Account

class Account extends React.Component {
  render () {
    return(
      <div className="container">
        <div className="section section__text-block">
          <div className="row">
            <div className="col-xs-12 col-sm-5 col-lg-5">
              <h1>Hello, Nicolas.</h1>
            </div>
          </div>
        </div>
        <div className="section">
          <div className="row psr">
            <div className="col-xs-12 col-sm-4 col-lg-4 psr zi-5">
              <AccountDetailsMenu/>
            </div>
            <Route path='/tools/meals/plans' component={AccountBillingInfo} {...this.props}/>
            <Route path='/tools/meals/account/orders' component={AccountOrders} {...this.props}/>
            {/*<Route path='/tools/meals/account/orders'/>*/}
            {/*<Route path='/tools/meals/account/email'/>*/}
            <div className="img-decor img-decor-01 img-decor-01--5">
              <img src="https://cdn2.shopify.com/s/files/1/0084/4457/5821/files/img-decor-01.svg?19889" alt="image description" />
            </div>
            <div className="img-decor img-decor-07 img-decor-07--4">
              <img src="https://cdn2.shopify.com/s/files/1/0084/4457/5821/files/img-decor-07.svg?19889" alt="image description" />
            </div>
          </div>
        </div>
      </div>
    )
  }
}

в котором есть тоже роуты, как мне теперь при переходе на ссылку /tools/meals/account/orders отрендерить AccountOrders компонент

у меня есть ссылки которые по идее должны вести на этот компонент
i```mport ComponentDidMount from 'containers/ComponentDidMount';


 class AccountDetailsMenuLink extends React.Component {
 render() {
   console.log(this.props);
   return (
     <li className={this.props.className}>
       <Link to={this.props.linkTo} activeClassName="sub-menu-active">{this.props.linkTitle}</Link>
     </li>
   )
 }
}


export default AccountDetailsMenuLink;

```lass AccountDetailsMenu extends React.Component {
  render() {
    return (
      <nav>
        <ul id="sub-menu">
          <AccountDetailsMenuLink {...this.props} linkTo="/tools/meals/account" linkTitle="Home"/>
          <AccountDetailsMenuLink {...this.props} linkTo="/tools/meals/account/settings" linkTitle="Account settings"/>
          <AccountDetailsMenuLink {...this.props} linkTo="/tools/meals/account/billing" linkTitle="Billing info"/>
          <AccountDetailsMenuLink {...this.props} linkTo="/tools/meals/account/orders" linkTitle="Order history"/>
          <AccountDetailsMenuLink {...this.props} linkTo="/tools/meals/account/email" linkTitle="Email notifications"/>
        </ul>
      </nav>
    )
  }
}

но при нажатии на ссылку меня бросает на самый верхний роут а не внутрь компонента Account

Я б не робив вкладених роутів щоб ці загадки не розгадувати :)

З вкладеними роутами добре справляється @reach/router

а почему ты не хочешь вынести в app из account роуты ?

<Route path='/tools/meals/plans' component={AccountBillingInfo} {...this.props}/>
           <Route path='/tools/meals/account/orders' component={AccountOrders} {...this.props}/>

потому что у меня несколько страниц будет а АccountOrders относится именно к этой странице

Винеси роути всі в окремий файл.

@lysenko_alex для початку спробуй прибрати exact

да, я уже разобрался