Как правильно тут настроить роутинг с помощью react-router-dom?

Question

[Nikita Shchypylov]

Всем привет
Есть подобный проект :

Красная зона должна повторяться, а синяя меняться. Для красной у меня два компонента, а для синей разные другие.
Я использую react-router-dom. Можно каждый раз перерендеривать всё вместе, но это глупо.
То есть, роутинг влияет только на синюю зону

Answer 1

[Mikhail Osher]

Названия за Вами, идея примерно такая. Остальное зависит от принятого Вами код-стайла и организации стилей (RSCSS, BEM, SMACSS, ...)

<Root>
  <Sidebar />
  <Main>
    <Navbar />
    <Content>
      <Switch>
        <Route ... />
      </Switch>
    </Content>
  </Main>
</Root>

Comments

[Nikita Shchypylov]

Получаю белый экран. Получилось так :

<div className="page">
        <Sidebar />
        <div className="page-content">
          <Menu />
          <div>
            <Switch>
              <Route
                exact
                path="/dashboard/dash"
                component={DashboardComponent}
              />
              <Route exact path="/dashboard/account_info" component={Account} />
            </Switch>
          </div>
        </div>
      </div>

Sidebar :

const content = sidebar ? (
      Object.keys(sidebar).map(element => {
        const className = `icon ${sidebar[element].icon}`;
        const url = sidebar[element].url;
        return (
          <li key={element}>
            <NavLink to={url} exact activeClassName="active">
              <i className={className} />
              <span className="text">{sidebar[element].text}</span>
            </NavLink>
          </li>
        );
      })
    ) : (
      <div>Loading, please, waits</div>
    );

С ссылками все в порядке

[Nikita Shchypylov]

Разобрался