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.