Answered by:
looking for a multi layout recommendation

Question
-
User1034446946 posted
Hi
I have three different layouts for my site, front end, membership and backend, and I am looking through lots of tutorials an my head is spinning, does anyone have a link to a recommendation.
Tuesday, September 24, 2019 8:04 PM
Answers
-
User-474980206 posted
if you were using react, I'd have a route per layout and a component for each layout
<BrowserRouter basename={baseUrl}> <Route exact path='/' component={Site)} /> <Route path='/front' component={FrontEnd} /> <Route path='/back' component={BackEnd} /> <Route path='/member' component={Membership} /> </BrowserRouter>
- Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
Tuesday, September 24, 2019 9:00 PM -
User1034446946 posted
this seems to suite my requirements
https://medium.com/@albertcito/different-layouts-with-react-router-1311a21a2df5
- Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
Wednesday, September 25, 2019 1:55 PM
All replies
-
User-474980206 posted
if you were using react, I'd have a route per layout and a component for each layout
<BrowserRouter basename={baseUrl}> <Route exact path='/' component={Site)} /> <Route path='/front' component={FrontEnd} /> <Route path='/back' component={BackEnd} /> <Route path='/member' component={Membership} /> </BrowserRouter>
- Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
Tuesday, September 24, 2019 9:00 PM -
User1034446946 posted
thanks for the reply but i was hoping, to not have to route my components based on a layout
Tuesday, September 24, 2019 10:00 PM -
User-719153870 posted
Hi EnenDaveyBoy,
I have three different layouts for my site,Your site is a MVC application or Webform appliaction or other kind?
If it's MVC, you can choose the layout of a page, and Webform too(in webform , it's called a master page).
Also, the requirement is not mentioned, you want to change the layout of you web page?
Best Regard,
Yang Shen
Wednesday, September 25, 2019 9:38 AM -
User1034446946 posted
hi, thanks for the reply, its a react site, using an web api
Wednesday, September 25, 2019 11:24 AM -
User1034446946 posted
this seems to suite my requirements
https://medium.com/@albertcito/different-layouts-with-react-router-1311a21a2df5
- Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
Wednesday, September 25, 2019 1:55 PM -
User-474980206 posted
their sample does the same. they just generalized to have a list of public route paths by root, to handle the additional urls
<BrowserRouter basename={baseUrl}> <Route exact path='/' component={SiteRoot)} /> <Route exact path='/page1' component={SitePage1)} /> ... <Route path='/front' component={FrontEndRoot} /> <Route path='/front/page1' component={FrontPage1} /> ... </BrowserRouter>
I would probably use an hoc for the layout that returned the component
const Layout = (Layout, Compononent) => <Layout><Component /><Layout>; const SitePage1 = Layout(SiteLayout, SitePage1);
Wednesday, September 25, 2019 8:58 PM -
User1034446946 posted
their sample does the same. they just generalized to have a list of public route paths by root, to handle the additional urls
<BrowserRouter basename={baseUrl}> <Route exact path='/' component={SiteRoot)} /> <Route exact path='/page1' component={SitePage1)} /> ... <Route path='/front' component={FrontEndRoot} /> <Route path='/front/page1' component={FrontPage1} /> ... </BrowserRouter>
I would probably use an hoc for the layout that returned the component
const Layout = (Layout, Compononent) => <Layout><Component /><Layout>; const SitePage1 = Layout(SiteLayout, SitePage1);
Wednesday, September 25, 2019 10:37 PM