locked
looking for a multi layout recommendation RRS feed

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



     

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

    Wednesday, September 25, 2019 10:37 PM