Вы должны быть в состоянии достичь того, что вам нужно, с помощью вложенных маршрутов и "маршрута без совпадения" .
Идея состояла бы в том, чтобы представить структуру вашей маршрутизации через вложенные маршруты, чтобы ограничить рендеринг <div className="container"> не / маршрутов.
Для этого вы можете извлечь компонент (например, WithContainer), который отображает <Route> для путей; /register, /login и /profiles, внутри <div className="container">. Затем вы изменили бы свой <Switch>, чтобы теперь отображать два маршрута для следующих вариантов маршрута;
- A
<Route/>, который отображает компонент Landing с точным соответствием /
- A
<Route/>, который отображает ваш новый компонент WithContainer на конкретном маршруте (т. Е. На любом пути, который точно не соответствует /)
При использовании <Switch> таким образом поведение маршрутизации будет отображать либо Landing, либо WithContainer (но не оба) в зависимости от первого соответствующего маршрута. Мы используем это поведение для ограничения рендеринга WithContainer (и, в свою очередь, элемента <div className="container">) для маршрутов "не /".
В коде этот подход может быть выражен как:
const WithContainer = () => (
<div className="container">
{ /* Wrap routes in container div */ }
<Route exact path="/register" component={Register} />
<Route exact path="/login" component={Login} />
<Route exact path="/profiles" component={Profiles} />
</div>)
const Main = () => (
<main>
<Switch>
<Route exact path='/' component={Landing}/>
<Route component={ WithContainer } /> {/* No match route */ }
</Switch>
</main>
)
Надеюсь, это поможет!