2017-10-24 16 views
0

私は小さなSPAアプリケーションの仕事をしようとしています。Node.js + Express最も簡単なSPAの例

私は私のアプリのフォルダに以下の構造を有する:

/about.html 
/index.html 
/index.js 

index.js:

const express = require('express'); 
const app = express(); 
const path = require('path'); 

const staticHref = '/static'; 
const publicFolder = path.join(__dirname, '/'); 

app.use(staticHref, express.static(publicFolder)); 
app.use(staticHref, function(req, res) { 
    res.send(404); 
}); 

app.all('/*', function(req, res) { 
    res.sendFile('index.html', {root: publicFolder}); 
}); 

app.listen(3000, function(){ 
    console.log('running'); 
}); 

のindex.html:

<!DOCTYPE html> 
<html> 
<head> 
    <title>Homepage</title> 
</head> 
<body> 
<h1>Homepage</h1> 
<a href="/static/about">About</a> 
</body> 
</html> 

about.html:

<!DOCTYPE html> 
<html> 
<head> 
    <title>About Us</title> 
</head> 
<body> 
<h1>About Us</h1> 
<a href="/static">Home</a> 
</body> 
</html> 

http://localhost:3000/static/に行くと、私のホームページが表示されます。しかし、aboutリンクをクリックすると、404がスローされますhttp://localhost:3000/static/about

どうすればこの問題を解決できますか?私はSPAとしてそれを働かせたいです(ページをナビゲートする際に更新する必要はありません)。

ありがとうございます!

答えて

3

これはSPAではありません。複数の静的ページがあり、基本的にすべてindexページにすべてのリクエストを送信しています。aboutなどの静的ページに移動することはできません。

SPAがどのように構成されているのではないため、SPAをどのように調査する必要があります。 JavaScriptフレームワーク(React、Angularなど)を使用して、クライアント側でも、サーバー側でもルートマッチングを行うことができます。

関連する問題