Express: How can I handle this? (About `Route`) - node.js

Question

I am beginner at node.js and express.
In my example project, firstly, I made an express project.
And I want to add a page named /product.
So, I take these steps.
Add product.jade file at views folder.
Add product.js file at routes folder.
revise app.js.
The product.jade is like this.
extends layout
block content
h1 #{title}
p Product Info.
The product.js is like this.
var express = require('express');
var router = express.Router();
/* GET product info. */
router.get('/product', function(req, res, next) {
res.render('product', { title: 'Express' });
});
module.exports = router;
Finally, I revised app.js. I added two lines.
One isvar productRouter = require('./routes/product');,
and the other is app.use('/product', productRouter);.
I was expecting it works.
But when I enter at localhost:3000/product, I only can see 404, Not Found.
Please help. What am I missing?
--- EDIT ---
app.js
var createError = require('http-errors');
var express = require('express');
var path = require('path');
var cookieParser = require('cookie-parser');
var logger = require('morgan');
var indexRouter = require('./routes/index');
var usersRouter = require('./routes/users');
var productRouter = require('./routes/product');
var app = express();
// view engine setup
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'jade');
app.use(logger('dev'));
app.use(express.json());
app.use(express.urlencoded({ extended: false }));
app.use(cookieParser());
app.use(express.static(path.join(__dirname, 'public')));
app.use('/', indexRouter);
app.use('/users', usersRouter);
app.use('/product', productRouter);
// catch 404 and forward to error handler
app.use(function(req, res, next) {
next(createError(404));
});
// error handler
app.use(function(err, req, res, next) {
// set locals, only providing error in development
res.locals.message = err.message;
res.locals.error = req.app.get('env') === 'development' ? err : {};
// render the error page
res.status(err.status || 500);
res.render('error');
});
module.exports = app;

Answer 1

You created a route for /product/product because your middleware specifies /product with this line:
app.use('/product', productRouter);
And, then your route again specifies /product in addition to that with this line:
router.get('/product', function(req, res, next) {...}
That creates a route for /product/product.
There are a couple ways to fix this. If your intention is that the productRouter handles all routes that start with /product, then leave the app.use() the same and change from this:
router.get('/product', function(req, res, next) {...}
to this:
router.get('/', function(req, res, next) {...}
If you don't intend to have multiple routes that start with /product and only need to define the one /product route handler, then you don't need to create a whole separate router just for that. You could instead, just export the route handler from product.js (instead of exporting the router) and then just use:
app.get('/product', require('./routes/product'));
That would put just a single route handler in product.js and avoid creating a router for just one route.