假使以一個 todo list 專案為例，根據關注點分離 (separation of concerns，SOC) 的設計原則，

專案結構可能會被設計成這樣:

有關 routes 的各個檔案為：

• 總路由器：routes/index.js
  • home 路由模組： routes/modules/home.js
  • todos 路由模組： routes/modules/todos.js

其中 home 跟 todo 是根據專案需要的功能來做區分，也就是說跟首頁有關的路由會被定義在 home.js檔案裏面、跟 todo logic 有關的功能則被放在 todos.js 裡；而 index.js 則是擔任 總路由器 的整理(有點像首頁、根頁: ' / ' 都會取名叫 index.js 的概念，原本設定路由的 app.js 則是會專心擔任 controller 的角色，而非原本方便性的在 app.js 大量設置凌亂的路由)。

這樣一來，可以把專案結構清晰化，即便日後要擴充新的功能邏輯，也能根據該邏輯分類將頁面良好的設計在對應的結構裡面，友善&有效增進專案的擴充性。

我們將會使用 express.Router 也就是 express 框架內建的路由器來整理專案路由。

以下以這個 todolist 專案架構為例繼續介紹大致上的操作。

總路由器 routes/index.js:

// import express & express.Router
const express = require('express');
const router = express.Router();

/* 
路由設定細節................
*/

// 匯出 router 至 wrapper　層
module.exports = router

在 index.js 匯出後須回到 app.js ( server主程式 ) 去掛載這支路由器:

// in app.js

// import index.js 設定的 router
const routes = require('./routes'); /* 注意這邊引用的是 routes 這個 folder */

// 將 request 導入路由器
app.use(routes);

這邊注意在 import 時是 import routes 這個 directory 而非直接 import index.js，因為 express.Router 預設會直接抓 routes folder 裡面的 index.js(總路由器)

home 路由模組/home.js - 設定

總路由器 index.js 跟 controller: app.js 之間的基本交互設定完成後，再來就是個別設定各個頁面 routing 的部分，先由首頁 Home.js 的邏輯開始設定: