Nested layout

  • If there is a layout.js file in the directory, accessing the route will first render this file, and then use {props.children} in layout.js to wrap the page corresponding to the route. It is equivalent to the entry of all files in the current directory, and is nested downward according to the directory structure, as follows:
my-nodestack-app
├── src
│   ├── pages
│   │   │── layout
│   │   │   │── index.js                        
│   │   │   │── about.js                       
│   │   │   │── layout.js   
│   │   │   │── app      
│   │   │   │   │── index.js       
│   │   │   │   │── about.js  
│   │   │   │   │── layout.js  
│   │   │   │   │── app1      
│   │   │   │   │   │── index.js       
│   │   │   │   │   │── about.js  
│   │   │   │   │   │── layout.js          
├── ndsk.config.js
└── package.json
  • Create a folder called layout in the /src/pages directory, and create the following files according to the directory structure above
export default (props)=>{  
    return (
      <html lang="en">
        <head>
          <title>layout</title> 
        </head>
        <body> 
            <div> <a href='/layout'>to index</a> </div>
            <div> <a href='/layout/about'>to about</a> </div>
            <div> <a href='/layout/app'>to app/index</a> </div>
            <div> <a href='/layout/app/about'>to app/about</a> </div>
            <div> <a href='/layout/app/app1'>to app/app1/index</a> </div>
            <div> <a href='/layout/app/app1/about'>to app/app1/about</a> </div>
            {props.children}
        </body>
      </html> 
    );
}

export default (props)=>{
    return (
        <div>layout/index</div>
    )
}

export default (props)=>{
    return (
        <div>layout/about</div>
    )
}

export default (props)=>{
    return (
        <div>
            <h1>app-layout</h1>
            {props.children}
        </div>
    )
}

export default (props)=>{
    return (
        <div>layout/app/index</div>
    )
}

export default (props)=>{
    return (
        <div>layout/app/about</div>
    )
}

export default (props)=>{
    return (
        <div>
            <h1>app1-layout</h1>
            {props.children}
        </div>
    )
}

export default (props)=>{
    return (
        <div>layout/app/app1/index</div>
    )
}

export default (props)=>{
    return (
        <div>layout/app/app1/about</div>
    )
}
  • Browser access http://localhost:3000/layout/app
  • Note: If there is a layout.js file, you must configure the html head header information in the first file, and it cannot be repeated, otherwise it will cause React hydration errors

Layout Example

  • Example 1:
my-nodestack-app
├── src
│   ├── pages
│   │   │── layout1                    
│   │   │   │── layout.js   
│   │   │   │── app      
│   │   │   │   │── index.js
│   │   │   │── blog      
│   │   │   │   │── index.js        
├── ndsk.config.js
└── package.json

export default (props)=>{  
    return (
      <html lang="en">
        <head>
          <title>layout1</title> 
        </head>
        <body> 
            <div> <a href='/layout1/app'>to app</a> </div>
            <div> <a href='/layout1/blog'>to blog</a> </div>
            {props.children}
        </body>
      </html> 
    );
}

export default ()=>{
    return (
        <div>layout1/app/index</div>
    )
}

export default ()=>{
    return (
        <div>layout1/blog/index</div>
    )
}

my-nodestack-app
├── src
│   ├── pages
│   │   │── layout2                    
│   │   │   │── index.js   
│   │   │   │── app      
│   │   │   │   │── index.js
│   │   │   │   │── about.js
│   │   │   │   │── layout.js
│   │   │   │── blog      
│   │   │   │   │── index.js
│   │   │   │   │── about.js
│   │   │   │   │── layout.js        
├── ndsk.config.js
└── package.json

export default (props)=>{  
    return (
      <html lang="en">
        <head>
          <title>layout2</title> 
        </head>
        <body> 
            <div> <a href='/layout2/blog'>to blog</a> </div>
            <div> <a href='/layout2/app'>to app</a> </div>
            {props.children}
        </body>
      </html> 
    );
  }

export default (props)=>{  
    return (
      <html lang="en">
        <head>
          <title>layout1</title> 
        </head>
        <body> 
            <div> <a href='/layout2/app'>to index</a> </div>
            <div> <a href='/layout2/app/about'>to about</a> </div>
            {props.children}
        </body>
      </html> 
    );
}

export default ()=>{
    return (
        <div>layout2/app/index</div>
    )
}

export default ()=>{
    return (
        <div>layout2/app/about</div>
    )
}

export default (props)=>{  
    return (
      <html lang="en">
        <head>
          <title>layout1</title> 
        </head>
        <body> 
            <div> <a href='/layout2/blog'>to index</a> </div>
            <div> <a href='/layout2/blog/about'>to about</a> </div>
            {props.children}
        </body>
      </html> 
    );
}

export default ()=>{
    return (
        <div>layout2/blog/index</div>
    )
}

export default ()=>{
    return (
        <div>layout2/blog/about</div>
    )
}

Custom layout

  • The framework will load layout.js by default for nested layout. We can configure custom layout files in the route
my-nodestack-app
├── src
│   ├── pages
│   │   │── custom_layout                    
│   │   │   │── index.js   
│   │   │   │── about.js   
│   │   │   │── layout.js  
│   │   │   │── navigation.js     
├── ndsk.config.js
└── package.json

export default (props)=>{  
    return (
      <html lang="en">
        <head>
          <title>custom layout</title> 
        </head>
        <body> 
            <div> <a href='/custom_layout'>to index</a> </div>
            <div> <a href='/custom_layout/about'>to about</a> </div>
            <div> <a href='/custom_layout/navigation'>to navigation Bar</a> </div>
            {props.children}
        </body>
      </html> 
    );
}

export default(props)=>{
    return (
        <div>
            custom_layout/index
        </div>
    )
}

export default(props)=>{
    return (
        <div>
            custom_layout/about
        </div>
    )
}

export default(props)=>{
    return (
        <div>
            <h1>This is a navigation bar</h1>
            {props.children}
        </div>
    )
}
  • Create files according to the directory structure above, then we create a route directory under the src directory and add a routing configuration file to index as follows:
my-nodestack-app
├── src
│   ├── pages
│   │   │── custom_layout                    
│   │   │   │── index.js   
│   │   │   │── about.js   
│   │   │   │── layout.js  
│   │   │   │── navigation.js     
│   ├── routes
│   │   │── custom_layout       
│   │   │   │── index.js  
├── ndsk.config.js
└── package.json

export const layout = [
    '/custom_layout/layout.js',
    '/custom_layout/navigation.js',
];
export default ()=>{
    return {}
}
  • Above we added a routing configuration file routes/custom_layout/index.js to pages/custom_layout/index.js and customized two layout files
export const layout = [
    '/custom_layout/layout.js',
    '/custom_layout/navigation.js',
];
  • After configuring a custom layout, the pages will be automatically loaded in order, for example: /custom_layout/layout.js is equivalent to loading src/pages/custom_layout/layout.js
  • Note: The first layout file must set html header
  • Visit http://localhost:3000/custom_layout

Next

Get data