Basic routing

  • The default basic routing is automatically generated according to the file directory, as follows:
my-nodestack-app
├── src
│ ├── pages
│ │ │── app
│ │ │ │── index.js //Route: /app or /app/index
│ │ │ │── about.js //Route: /app/about
│ │ │ │── about
│ │ │ │ │── index.js //Route: /app/about/index
│ │ │ │ │── other.js //Route: /app/about/other
├── ndsk.config.js
└── package.json
  • Create according to the directory structure above
export default (props)=>{  
    return (
      <html lang="en">
        <head>
          <title>app/index</title> 
        </head>
        <body> 
            <div><a href='/app/about'>to about</a></div>
            <div><a href='/app/about/index'>to about/index</a></div>
            <div><a href='/app/about/other'>to about/other</a></div>
        </body>
      </html>
    );
}

export default (props)=>{  
    return (
      <html lang="en">
        <head>
          <title>app/about</title> 
        </head>
        <body> 
            app/about
        </body>
      </html>
    );
}

export default (props)=>{  
    return (
      <html lang="en">
        <head>
          <title>app/about/index</title> 
        </head>
        <body> 
            app/about/index
        </body>
      </html>
    );
}

export default (props)=>{  
    return (
      <html lang="en">
        <head>
          <title>app/about/other</title> 
        </head>
        <body> 
            app/about/other
        </body>
      </html>
    );
}

  • By default, index can be ignored. For example, the path is: src/pages/app/index.js. The generated routes are /app or /app/index.

  • Note: If the directory name is the same as the file name, it cannot be ignored, as shown below:

├── src
│ ├── pages
│ │ │── app
│ │ │ │── about.js //Route: /app/about
│ │ │ │── about
│ │ │ │ │── index.js //Route: /app/about/index
├── ndsk.config.js
└── package.json

Custom route

  • Create the corresponding file path in the routes directory, and then set path to achieve it, as follows:
├── src
│   ├── pages
│   │   │── app
│   │   │   │── about.js                       
│   │   │   │── about
│   │   │   │   │── index.js                   
│   ├── routes
│   │   │── app
│   │   │   │── about.js                        
├── ndsk.config.js
└── package.json
  • Change the default route of pages/app/about.js to /a
export const path = '/a'
export default (request)=>{ 
  return {}
}

Dynamic routing

  • Modify the above file to
export const path = '/a/{p*}'
export default (request)=>{  
  console.log(request.params) 
  return {}
}
  • This means that all paths starting with /a will point to the current route, for example: /a/123 /a/test/123 You can view detailed route configuration here
  • Here View the documentation on getting request parameters

Next step

Page layout