app.get() cannot find and show the right template(jade) page - node.js

Question

I am studying about very basic Serverside JS using express, jade, node.JS.
At the first page (localhost/topic), there is a list. And List's data from MySQL.
(MySQL fields are id, title, description, and author)
Also, there is a link to open the form (the form is in add.jade file) that can add an item on the list.
My problem is that if I clicked the link, the page still shows the view.jade. But, the address is changed to "localhost/topic/add".
I've checked the "app.js" file to see if app.get() isn't set appropriately. But I did not find any.
Actually, the template was written as jade at first. But I tried to convert jade to pug. After this error, I put them back all to jade.
Is that a problem?
Thank you.
var express = require("express");
var app = express();
app.set("views", "./views_mysql");
app.set("view engine", "jade");
app.listen(3000, function() {
console.log("Connected, 3000 port!");
});
app.locals.pretty = true;
var mysql = require("mysql");
var conn = mysql.createConnection({
host: "localhost",
user: "jimin",
password: "****",
database: "o2"
});
conn.connect();
app.get(["/topic", "/topic/:id"], function(req, res) {
var sql = "SELECT id, title FROM topic";
conn.query(sql, function(err, topics, fields) {
var id = req.params.id;
if (id) {
var sql = "SELECT * FROM topic WHERE id=?";
conn.query(sql, [id], function(err, id_topics, fields) {
if (err) {
console.log(err);
res.status(500).send("Internal Server Error");
} else {
res.render("view", { topics: topics, topic: id_topics[0] });
}
});
} else {
res.render("view", { topics: topics });
}
});
});
app.get("/topic/add", function(req, res) {
var sql = "SELECT id, title FROM topic";
conn.query(sql, function(err, topics, fields) {
if (err) {
console.log(err);
res.status(500).send("Internal Server Error");
} else {
res.render("add", { topics: topics });
}
});
});
<!-- begin snippet: js hide: false console: true babel: false -->
// add.jade
doctype html
html
head
meta(charset='utf-8')
body
h1
a(href='/topic') Server Side JavaScript
ul
each topic in topics
li
a(href='/topic/' + topic.id)= topic.title
article
form(action='/topic/add' method='post')
p
input(type='text' name='title' placeholder='title')
p
textarea(name='description' placeholder='description')
p
input(type='text' name='author' placeholder='author')
p
input(type='submit')
//view.jade
doctype html
html
head
meta(charset='utf-8')
body
h1
a(href='/topic') Server Side JavaScript
ul
each topic in topics
li
a(href='/topic/' + topic.id)= topic.title
article
if topic
h2= topic.title
= topic.description
div= 'by ' + topic.author
else
h2 Welcome
| This is Server Side JS Tutorial
div
a(href='/topic/add') add Topic
app.get("/topic/add", function(req, res) {
var sql = "SELECT id, title FROM topic";
conn.query(sql, function(err, topics, fields) {
if (err) {
console.log(err);
res.status(500).send("Internal Server Error");
} else {
res.render("add", { topics: topics });
}
});
});

Answer 1

This is an issue with the arrangement of the routes.
TLDR
Move the route definition of app.get above the previously declared route.
Explanation
Route definitions in express are from a top-to-bottom approach. So, in runtime, your routes are seen as follows:
/topic
/topic/:id
topic/add
When you visit the page /topic/add, you would expect it to match to the third on the list but Express actually matches it to the second on the list... It will actually match everything if you put anything after /topic.