AppShell and Mantine UI with React Route questions | Mantine | Page 1

cyan thistle Jun 12, 2024, 9:17 PM

#

I am new to UI dev and React and Mantine. So please bear with my simple questions. I like AppShell since I can create designated fixed regions in my app's layout. My app will have a few pages and each will have different layout. The pages links will be in a nav section of some sort and I want to use react routing for it.

Questions:

Can I use different AppShell layout for all my pages. Will that be a good pattern? I was assuming AppShell should be used if the app regardless of which page it is going to maintains the same layout.
Can I nest AppShell components?
I see some nice Nav and Header examples in Mantine UI collections. But nothing with using react router. Is there any example of Nav with React Routing?

Thank you.

real warren Jun 12, 2024, 10:19 PM

#

You can use different layout for each page up to you and design. 2. You cannot have nested appshell within the same page only one app shell per page. 3. One example of react next js link https://mantine.dev/guides/polymorphic/#polymorphic-components-as-nextjs-link

Polymorphic components | Mantine

React components and hooks library with native dark theme support and focus on usability, accessibility and developer experience

cyan thistle Jun 13, 2024, 12:32 AM

#

Thank you @real warren . If I have say 5 or 6 different components each with different layout that takes up the entire screen (minus the stationary navbar/page-menu) is it a good idea to use AppShell to create layout for those 6 app components. Or may be I am better of using other layout components such as Grid, Flex, Box etc.? That is not use AppShell at all.

#AppShell and Mantine UI with React Route questions