Routing

Route Structure

The folder structure of src/router/ looks like this:

src/
  router/
    routes/       # Route Groups
      _main.js
      groupA.js
      groupB.js
      groupC.js
      ...
    index.js      # Route Register

As you can see, the router are consisted of groups of routes and the file that used to register those routes to the app.

// src/router/index.js

const nextRoutes = require('next-routes')
const routes = nextRoutes()

// Import route groups
const main = require('./routes/_main')
const groupA = require('./routes/groupA')
const groupB = require('./routes/_groupB')
const groupC = require('./routes/_groupC')

// Combine each route group together
const allRoutes = [
  ...main,
  ...groupA,
  ...groupB,
  ...groupC
]

allRoutes.forEach(function({ name, pattern, page }) {
  routes.add(name, pattern, page)
})

module.exports = routes

Route Design

Multiple Group

If your app are quite large, multiple route group is prefer.

// src/router/routes/_main.js

const routes = [
  {
    pattern: '/',
    name: 'home',
    page: 'index',
  },
  {
    pattern: '/about',
    name: 'about',
    page: 'about',
  },

  ...
]

module.exports = routes

// src/router/routes/article.js

const routes = [
  {
    pattern: '/articles',
    name: 'article-list',
    page: 'article-list',
  },
  {
    pattern: '/article/:id',
    name: 'article-detail',
    page: 'article-detail',
  },

  ...
]

module.exports = routes

You can separate route groups by your own rules, but what we recommended is separating by the prefix of patterns.

Single Group

But if your app is simple, the single route group is more than OK.

// src/router/routes/_main.js

const routes = [
  {
    pattern: '/',
    name: 'home',
    page: 'index',
  },
  {
    pattern: '/article/:id',
    name: 'article-detail',
    page: 'article-detail',
  },
  {
    pattern: '/about',
    name: 'about',
    page: 'about',
  },
  {
    pattern: '/login',
    name: 'login',
    page: 'login',
  },
  {
    pattern: '/account',
    name: 'account',
    page: 'account',
  },
]

module.exports = routes

Note: Do not forget that the router will match only the first route pattern that meet the condition. If your routes are not so many, you can still manage all patterns efficiently. But if your app grows and becomes a very complex one, refactoring to a multiple group design is a better choice.