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.

Answer 1

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>    

Answer 2

User1034446946 posted

thanks for the reply but i was hoping, to not have to route my components based on a layout

Answer 3

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

Answer 4

User1034446946 posted

hi, thanks for the reply, its a react site, using an web api

Answer 5

User1034446946 posted

this seems to suite my requirements

https://medium.com/@albertcito/different-layouts-with-react-router-1311a21a2df5

Answer 6

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);

 

Answer 7

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);

 

sorry yes.i was a bit slow at putting two and two together and using hocs.