How to make complex routing in react?

Question

React

I'm just learning reac and have a question about react-router-dom. I don't even know how to describe it.
We have a main page with a menu and content for each menu item. This is easy to do. I wrapped it in an application and in the content I write Route and show the page on which we clicked in the menu.
I decided to add a sign in button to the header and I want my application to work like this:
path="/" - show the entire application
path="/sign-in" - show only the login page (whatever there is neither header nor menu)
path="/news - show the header menu application and the news section.
With the fact that path="/" and path="/news" I understand how it works. I just can’t figure out how to embed a page with path="/sign-in" into this routing scheme, so that only its content is shown in this path (without header(a)). Thanks in advance.

Answer 1

Thanks for the advice. This solution did not help me.
How do they do such things. Maybe there is a simple universal solution described somewhere (example). Or everyone does like this (example) and no one cares. I think for a start, some standard blank is enough for me. If it's not difficult, then advise something, some kind of solution that you use in 80% of cases.

Answer 2

As a solution, write a MainLayout container component:

const MainLayout = ({ children }) => (
  <Wrapper>
    <Header />
    <Content>
      {children}
    </Content>
    <Footer />
  </Wrapper>
);

In the App component:

<Switch>
  <Route exact path="/" component={Main} />
  {/* остальные роуты */}
</Switch>

In pages/Main and other pages with header and footer:

const Main = () => (
  <MainLayout>
    {/* тут содержимое страницы */}
  </MainLayout>
);