грубый мокап на картинке ниже. Я хочу сделать так, чтобы Navigation, Header и User Profile были всегда в родительском компоненте, и чтобы родитель отрисовывал дочерние странички в блоке Dynamic Content (см. картинку). Я хотел рендерить компоненты Navigation, Header and User Profile В компоненте App и запихнуть в него Router, типо такого
ReactDOM.render(
<App>
<Switch>
<Route />
</Switch>
</App>
)
Но потом я вспомнил, что у меня будет страничка, которая отличается от шаблона как на картинке (например окно логина). Как в таком случае лучше организовать разбиение по компонентам и сделать нормальный роутинг? Подскажите, плиз, как лучше это загуглить?
export function App() { return ( <Router history={history}> <Switch> <Route path="/landing" component={Landing} /> <Route path="/app" component={AdminApp} /> </Switch> </Router> ); } export function AdminApp({ match, history, location }) { return ( <> <Header /> <Switch> <Route path={match.path} exact component={Dashboard} /> <Route path={`${match.url}/profile`} component={Profile} /> </Switch> <Footer /> </> ); }
Обсуждают сегодня