ルートの整合性でエクスプレスとの反応の展開

背景

あなたが、または反応を知らないかもしれないので、しばしばブラウザを通してルーティングを使用しますhistory API
あなたが遭遇するかもしれない一般的なライブラリのいくつかは

Router DOMを反応させるhttps://www.npmjs.com/package/react-router-dom

ワウールhttps://www.npmjs.com/package/wouter (人好き)

これらのライブラリは、ルートを定義し、どのコンポーネントがレンダリングされます.
簡単な例

<Route path="/about"><AboutPage/></Route>
<Route path="/user/:id">
    {params => <UserPage id={params.id} />}
</Route>

これをdevモードで実行するとうまく動作します.

問題

あなたが反応アプリを構築し、それを明示的にホストしようとすると、我々は問題で実行することに気づくでしょう

import * as express from 'express'
const app = express()
app.use(express.static(configuration.buildDirectory));
app.listen(8080, () => {
    console.log(`Server started on port 8080`);
});

あなたがhttp://127.0.0.1:8080 あなたの反応アプリが表示されます.
しかし、あなたがhttp://127.0.0.1:8080/about
エラーが発生します:

Can't GET /about

問題を解決する

我々の問題は、Expressがルート'/'を使用できるだけであるという事実から来ます.
アイデアは、我々はルートを維持したいが、まだ我々のビルドを表示することですindex.htmlこのため、次の文を追加できます.

app.all('*', (req, res) => {
    res.sendFile(path.join(configuration.buildDirectory, '/index.html'), (err) => {
        if (err) {
            res.status(500).send(err)
        }
    })
});

これは、すべてのルートのために我々はindex.html しかし、リダイレクトされていないので、URLスキームを保存します.

Pixiumデジタル—技術と革新によるプロジェクトの形成
https://pixiumdigital.com
https://github.com/pixiumdigital