<a>タグのhrefが遷移しない。(node.js)

<a>タグがhrefのリンク先に遷移されません。
例えば<a href="/test”></a>をクリックしたとき、URLには/testが付きますが画面は変化しません。
サーバー側に恐らく問題があるのかな？と思いますが皆目分かりません。良ければお力添えをお願いします。

server.js

Javascript
1
2let express = require("express")
3let indexrouter = require('./index')　//index.jsを読み込む
4
5let connection = require('./mysqlconnect')
6let http = require('http')
7let app = express()
8let server = http.createServer(app)
9
10app.set("view engine","ejs")
11app.use(express.static('public'))
12app.use(express.json())
13app.use(express.urlencoded({extended : true}))
14
15app.use('/', indexrouter)
16app.use('/login', login)
17
18app.listen(8080, ()=>{
19    console.log("HelloWorld")
20})

index.js

Javascript
1let express = require('express')
2let router = express.Router()
3
4//let connection = require('./router/mysqlconnect')
5var knex = require('knex')({
6    client: 'mysql',
7    connection: {
8                host     : 'localhost',
9                user     : 'root',
10                database : 'mydb'
11    }
12});
13
14var Bookshelf = require('bookshelf')(knex);
15var MyData = Bookshelf.Model.extend({
16    tableName: 'zatu'
17});
18router.get('/',(req, res, next) => {
19
20    new MyData()
21        .fetchPage({page: 1, pageSize: 3})
22        .then((collection) => {
23            var data = {
24                title: 'INDEX',
25                content: collection.toArray(),
26                pagination: collection.pagination
27            };
28
29            res.render('index.ejs', data);
30        })
31        .catch((err) => {
32            res.status(500).json({
33                error: true,
34                data: {message: err.message}
35            });
36        });
37});
38
39
40//Bookshelfでページネーションの実装
41
42router.get('/:page',(req, res, next) => {
43
44    var pg = req.params.page;
45    pg *= 1;
46
47    new MyData()
48        .fetchPage({page: pg, pageSize: 3})
49        .then((collection) => {
50            var data = {
51                title: 'INDEX',
52                content: collection.toArray(),
53                pagination: collection.pagination
54            };
55
56            res.render('index.ejs', data);
57        })
58        .catch((err) => {
59            res.status(500).json({
60                error: true,
61                data: {message: err.message}
62            });
63        });
64});
65
66// /newに遷移した際の処理
67router.get('/new', (req, res, next) => {
68
69    var data = {
70        title: 'CREATE',
71        content: '新しいレコードを入力：'
72    };
73
74    res.render('new.ejs', data);
75});
76
77
78router.post('/create', (req, res, next) => {
79
80    var response = res;
81
82    new MyData(req.body).save().then((model) => {
83        response.redirect(('/'));
84    })
85});
86
87
88module.exports = router

indes.ejs

HTML
1<!DOCTYPE html>
2<html lang="en">
3
4<head>
5  <link rel="stylesheet" href="/css/style.css">
6  
7</head>
8
9<body>
10    
11  <div class=contanier>
12    <header>
13    </header>
14    <hr>
15    <div class="top-detail">
16      <div class="new-detail">
17    
18        　<h1><%= title %></h1>
19        <br>
20      <article class="message　is-small">
21        
22            <div role="main">
23        <ul class="table-body">
24        <% for (var i in content) { %>
25        <li>
26            <% var obj = content[i].attributes; %>
27            <td><%= obj.title %></td>
28            <td><%= obj.content %></td>
29            <td><%= obj.created_at %></td>
30            
31        </li>
32        <% } %>
33        </ul>
34       </div>
35        
36        </div>
37        </artcle>
38        <hr>
39         <div class="new-zatu">
40          <a href="/new" class="button is-success is-rounded">投稿する</a>
41        </div>
42        
43        <div>
44        <span><a href="/1">&lt;&lt; 最初</a></span>
45        |
46        <% if (pagination.page == 1) { %>
47            <span><a href="/<%= pagination.page %>">&lt; 前</a></span>
48            ||
49            <span><a href="/<%= pagination.page + 1 %>">後 &gt;</a></span>
50        <% } else if (pagination.page == pagination.pageCount) { %>
51            <span><a href="/<%= pagination.page - 1 %>">&lt; 前</a></span>
52            ||
53            <span><a href="/<%= pagination.page %>">後 &gt;</a></span>
54        <% } else { %>
55            <span><a href="/<%= pagination.page - 1 %>">&lt; 前</a></span>
56            ||
57            <span><a href="/<%= pagination.page + 1 %>">後 &gt;</a></span>
58        <% } %>
59        |
60        <span><a href="/<%= pagination.pageCount %>">最後 &gt;&gt;</a></span>
61    </div>
62      </div>
63    </div>
64  </div>
65  
66
67</body>
68
69</html>

snogot

2020/05/05 11:56

Expressのルーティングに問題がありそうです。差し支えなければ、index.js の～中略～部分を略さずに記載してもらえませんか？

Tikka123456

2020/05/05 12:33

返信ありがとうございます。中略の部分を書きました。index.jsはBookshelfを使ったページネーションの実装です。このページネーションを作ってからページが遷移しなくなってしまいました。

snogot

2020/05/05 14:05

追記ありがとうございます。回答したいと思います。

行動規範の内容に同意します

回答1件

ベストアンサー

index.js内のルーティング設定は、上から順番に評価され、
最初にマッチングした処理が実行されます。
今回ページが遷移しなくなってしまったのは '/new' だと思いますが、
'/new'は以下両方の条件に合致するため、上に書いている'/:page' が優先されてしまいます。

JavaScript
1router.get('/:page', ...
2router.get('/new', ...

単純な対策としては、

JavaScript
1router.get('/new', ...

を

JavaScript
1router.get('/:page', ...

より上に配置する方法が考えられます。
もしくは、そもそも:pageに想定される値が数字だけであれば、

JavaScript
1router.get('/:page([0-9]+)', ...

のように正規表現でマッチング対象を絞ることで、'/new'をマッチさせなくすることもできます。

以下、Expressの公式サイトにルーティングについてのドキュメントがありますので、参考にしてみてください。
Express でのルーティング

投稿2020/05/05 14:05

snogot

総合スコア134

Tikka123456

2020/05/05 15:01

なるほど。処理される順番の事を考慮していませんでした。勉強になりました！ありがとうございます。

行動規範の内容に同意します

あなたの回答

tips

プレビュー

行動規範の内容に同意します

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

15分調べてもわからないことは
teratailで質問しよう！

ただいまの回答率
85.35%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう！

<a>タグのhrefが遷移しない。(node.js)

関連した質問