Introduction

  • Routing is the core of the framework, located in the src/routes directory. By default, the routing path will be generated according to the directory structure
  • If the current route method:'get', and src/pages has a directory corresponding to the route, it will be used as the routing configuration file of pages, rendering and passing data to the page, otherwise it will be used as an api call, as shown in the following example:
my-nodestack-app
├── src
│   ├── pages
│   │   │── route
│   │   |   │── index.js
│   ├── routes
│   │   │── route
│   │   |   │── index.js
│   │   |   │── about.js
├── ndsk.config.js
└── package.json

export default (props)=>{
    return (
        <html>
            <head>
                <title>{props.title}</title>
            </head>  
            <body> 
                {props.name || 'data is null'} 
            </body>
        </html>
    )
}

export default (request)=>{
    return {
        title:'route',
        name:'this is route index page'
    }
}

export default (request)=>{
    return {
        title:'route',
        name:'this is route about page'
    }
}

export const method = ['post']
export default (request)=>{
    return {
        title:'route',
        name:'this is route index page'
    }
}
  • The above indicates that the current route only allows post requests. If you visit http://localhost:3000/route/index again, you will get data is null. Only setting post request will not render the page.
  • Modify again as follows:
export const method = ['get','post']
export default (request)=>{
    return {
        title:'route',
        name:'this is route index page'
    }
}
  • The above indicates that get post requests are allowed at the same time, the page will render normally, and you can also use fetch current route in the page to get post data
export const method = ['get','post']
export default ({method})=>{
    return {
        title:'route',
        name:`this is ${method} request`
    }
}

import {useState} from 'react'
export default (props)=>{
    const [value,setValue] = useState(props.name);
    const onClick = ()=>{
        fetch('/route',{
            method:"POST"
        }).then(async text=>{
            const {name} = await text.json();
            setValue(name)
        })
    }
    return (
        <html>
            <head>
                <title>{props.title}</title>
            </head>  
            <body> 
                <div>{value}</div>
                <button onClick={onClick}>Post</button>
            </body>
        </html>
    )
}

Routing Configuration

export const method = ['get'];      
export const path = '/example';
export const layout = true;
export const SSG = false;
export const render = false;
export const options = {};
export default = (request)=>{
    return {}
}

method

  • Allowed request types, can be ['get'], ['post'], ['get','post'], default value is ['get']

path

  • Routing path, must start with /, by default generated according to the directory structure, for example, src/routes/test.js default corresponding path is /test, you can allow custom configuration path, for example:
export const path = '/book/{id}'         //All /book/aaa /book/bbb /book/xxx will match the current route
export const path = '/book/{id}/cover'   //All /book/aaa/cover /book/bbb/cover /book/xxx/cover will match the current route
export const path = '/book/{id}*'        //All URLs starting with /book/ will match the current route
export const path = '/{p}*'              //Match all routes
export const path = '/book/{id?}'        //? indicates an optional parameter, /book/ /book/test /book/a /book/1 all point to the current route
export const path = '/book{id?}/app'     // /book1/app /book2/app /booktest/app all point to the current route

layout

  • Whether to enable nested layout, true or false turns nested layout mode on and off, array sets custom layout, here View related documents

SSG

  • Equal to true or false turns static html generation on and off, here View SSG related documents

render

  • A string, if there is a corresponding file in the src/pages directory, the default is this file path, otherwise it is false, for example: route routes/index.js, if there is a pages/index.js file, it is /index.js, you can change it to render other page files

options

  • Routing configuration options, each route can be configured separately, or server.routes can be set in ndsk.config.js for global configuration
  • You can See full documentation on the route.options configuration here

Next

Request