Mounting routers with app.use in Express - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

What is the output when accessing a mounted router path?

Consider this Express app code:

const express = require('express');
const app = express();
const router = express.Router();

router.get('/hello', (req, res) => {
  res.send('Hello from router!');
});

app.use('/api', router);

app.listen(3000);

What will the server respond with when a client requests /api/hello?

Express

const express = require('express');
const app = express();
const router = express.Router();

router.get('/hello', (req, res) => {
  res.send('Hello from router!');
});

app.use('/api', router);

app.listen(3000);

A Server crashes with an error

B Responds with 404 Not Found

C Responds with 'Cannot GET /api/hello'

D Responds with 'Hello from router!'

💡 Hint

Think about how the router is mounted with the '/api' prefix and the route inside the router.

The router is mounted at '/api', so the route '/hello' inside the router becomes '/api/hello' on the app. Accessing '/api/hello' matches the router's route and sends the response.

📝 Syntax

intermediate

Which option correctly mounts a router at '/users'?

Given a router created with const router = express.Router();, which code correctly mounts it on the app at path '/users'?

Express

const express = require('express');
const app = express();
const router = express.Router();

A app.use('/users', router);

B app.get('/users', router);

C app.router('/users', router);

D app.mount('/users', router);

💡 Hint

Remember the method used to add middleware or routers to an Express app.

The correct method to mount a router at a path is app.use(path, router). Other methods like app.get are for route handlers, not mounting routers.

🔧 Debug

advanced

Why does this mounted router not respond as expected?

Look at this code:

const express = require('express');
const app = express();
const router = express.Router();

router.get('/profile', (req, res) => {
  res.send('User profile');
});

app.use(router);

app.listen(3000);

Why does a request to /profile return 404 Not Found?

Express

const express = require('express');
const app = express();
const router = express.Router();

router.get('/profile', (req, res) => {
  res.send('User profile');
});

app.use(router);

app.listen(3000);

A Because the router is mounted without a path, so '/profile' is matched at root and should work

B Because the router is mounted without a path, so '/profile' is not matched

C Because the router's route should be '/router/profile' to work

D Because app.use(router) requires a second argument for the path

💡 Hint

Think about what happens when you mount a router without specifying a path.

Mounting a router without a path means it is mounted at root '/'. So the router's '/profile' route is accessible at '/profile'. The code should respond correctly unless another middleware blocks it.

❓ state_output

advanced

What is the output when multiple routers are mounted with overlapping paths?

Given this code:

const express = require('express');
const app = express();
const router1 = express.Router();
const router2 = express.Router();

router1.get('/item', (req, res) => {
  res.send('From router1');
});

router2.get('/item', (req, res) => {
  res.send('From router2');
});

app.use('/api', router1);
app.use('/api', router2);

app.listen(3000);

What will the server respond with when a client requests /api/item?

Express

const express = require('express');
const app = express();
const router1 = express.Router();
const router2 = express.Router();

router1.get('/item', (req, res) => {
  res.send('From router1');
});

router2.get('/item', (req, res) => {
  res.send('From router2');
});

app.use('/api', router1);
app.use('/api', router2);

app.listen(3000);

A Responds with both 'From router1' and 'From router2'

B Responds with 'From router2'

C Responds with 'From router1'

D Responds with 404 Not Found

💡 Hint

Consider the order in which middleware and routers are added in Express.

Express processes middleware in the order they are added. The first router matches '/api/item' and sends a response, so the second router is not reached.

🧠 Conceptual

expert

What happens if you mount a router with a trailing slash in the path?

Consider this code:

const express = require('express');
const app = express();
const router = express.Router();

router.get('/data', (req, res) => {
  res.send('Data route');
});

app.use('/api/', router);

app.listen(3000);

What is the effect of the trailing slash in app.use('/api/', router) on route matching?

Express

const express = require('express');
const app = express();
const router = express.Router();

router.get('/data', (req, res) => {
  res.send('Data route');
});

app.use('/api/', router);

app.listen(3000);

A The trailing slash causes a syntax error when mounting the router

B The trailing slash is ignored; '/api/data' matches and responds with 'Data route'

C The trailing slash causes only '/api//data' to match, so '/api/data' returns 404

D The trailing slash causes the router to be mounted at root '/' instead of '/api'

💡 Hint

Think about how Express normalizes paths when mounting routers.

Express treats the path in app.use as a prefix and normalizes trailing slashes. So '/api/' and '/api' behave the same for mounting routers.

Practice

1. What is the main purpose of using app.use to mount routers in Express?

easy

A. To automatically generate HTML pages

B. To directly send responses without defining routes

C. To group related routes under a common base path for better organization

D. To replace the Express app with a router

Solution

1. Step 1: Understand what app.use does

   app.use mounts middleware or routers at a specified path, grouping routes.

2. Step 2: Identify the benefit of mounting routers

   Mounting routers organizes routes under a base path, making code cleaner and easier to maintain.

3. Final Answer:

   To group related routes under a common base path for better organization -> Option C

4. Quick Check:

   Mount routers = group routes [OK]

Hint: Mount routers to group routes under one path [OK]

Common Mistakes:

• Thinking app.use replaces the app
• Believing it sends responses directly
• Confusing mounting with automatic page generation

2. Which of the following is the correct syntax to mount a router named userRouter on the path /users using app.use?

easy

A. app.use('/users', userRouter);

B. app.use(userRouter, '/users');

C. app.get('/users', userRouter);

D. app.mount('/users', userRouter);

Solution

1. Step 1: Recall the app.use syntax

   The correct syntax is app.use(path, router) to mount a router at a path.

2. Step 2: Match the correct order and method

   app.use('/users', userRouter); uses app.use('/users', userRouter); which is correct. Others have wrong order or method.

3. Final Answer:

   app.use('/users', userRouter); -> Option A

4. Quick Check:

   app.use(path, router) = correct syntax [OK]

Hint: Remember: app.use(path, router) mounts router [OK]

Common Mistakes:

• Swapping router and path order
• Using app.get instead of app.use
• Using non-existent app.mount method

3. Given the following code, what URL path will respond with 'User list'?

const express = require('express');
const app = express();
const userRouter = express.Router();

userRouter.get('/', (req, res) => res.send('User list'));

app.use('/users', userRouter);

medium

A. /users/

B. /

C. /user/

D. /users/list

Solution

1. Step 1: Understand router path and mounting

   The router defines a GET route at '/' which is relative to where it is mounted.

2. Step 2: Combine mount path and router route

   Since userRouter is mounted at '/users', the full path is '/users/' to reach the route.

3. Final Answer:

   /users/ -> Option A

4. Quick Check:

   Mount path + router route = full URL [OK]

Hint: Router path '/' + mount '/users' = '/users/' [OK]

Common Mistakes:

• Ignoring mount path and using '/' alone
• Confusing '/user/' with '/users/'
• Assuming '/users/list' without route defined

4. What is wrong with this code snippet?

const express = require('express');
const app = express();
const router = express.Router();

router.get('/info', (req, res) => res.send('Info page'));

app.use(router, '/info');

medium

A. Missing app.listen call

B. Router cannot have routes with '/info' path

C. app.use cannot mount routers

D. The arguments to app.use are in the wrong order

Solution

1. Step 1: Check app.use argument order

   The correct order is app.use(path, router), but here it is reversed.

2. Step 2: Identify the error cause

   Passing router first and path second causes Express to treat router as middleware without a path, leading to unexpected behavior.

3. Final Answer:

   The arguments to app.use are in the wrong order -> Option D

4. Quick Check:

   app.use(path, router) order matters [OK]

Hint: app.use(path, router) order is strict [OK]

Common Mistakes:

• Swapping router and path in app.use
• Thinking router paths can't have '/info'
• Ignoring missing app.listen (not related here)

5. You want to mount two routers, adminRouter and userRouter, so that /admin/dashboard and /users/profile work correctly. Which code correctly mounts both routers?

hard

A. app.use(adminRouter, '/admin');\napp.use(userRouter, '/users');

B. app.use('/admin', adminRouter);\napp.use('/users', userRouter);

C. app.use('/admin/dashboard', adminRouter);\napp.use('/users/profile', userRouter);

D. app.get('/admin', adminRouter);\napp.get('/users', userRouter);

Solution

1. Step 1: Understand mounting routers at base paths

   Mount routers at base paths like '/admin' and '/users' so their internal routes append correctly.

2. Step 2: Check each option for correct syntax and paths

   app.use('/admin', adminRouter);\napp.use('/users', userRouter); uses app.use('/admin', adminRouter); and app.use('/users', userRouter);, which is correct. app.use(adminRouter, '/admin');\napp.use(userRouter, '/users'); swaps arguments, C mounts at full paths (not base), D uses app.get which is incorrect for mounting routers.

3. Final Answer:

   app.use('/admin', adminRouter); app.use('/users', userRouter); -> Option B

4. Quick Check:

   Mount routers at base paths with app.use(path, router) [OK]

Hint: Mount routers at base paths with app.use(path, router) [OK]

Common Mistakes:

• Swapping router and path in app.use
• Mounting routers at full nested paths
• Using app.get instead of app.use for routers