リアクタ・ルータ4 HashRouter、どのようにしてURLにハッシュを隠すことができますか？

Question

私は静的ビルドをAWSバケットに入れ、クラウドフロントを経由しているので、react-router-4 HashRouterを使用しています。ですから、本質的に私はBrowserRouteをサポートするために、フロントエンド側にサーバーを持っていません。

私が欲しいのです：example.com/#/accounts_ to be _example.com/accountsは
角度1.xでは、私は同じことを達成するために$locationProvider.html5Mode(true)を使用します。

ご協力いただければ幸いです。

Answer 1

BrowserRouterを使用できます。クライアントとサーバーのルーティングがどのように機能するかを読むことをお勧めします。

プロダクション環境で何かを使用する予定がある場合は、インデックスページへのフォールバックルートを設定してクライアント側ルーティングを処理するように環境を設定する必要があります。

import { BrowserRouter, Switch, Route } from 'react-router-dom'; 

<BrowserRouter> 
    <Switch> 
    <Route exact path="/foo" component={FooController} 
    <Route path="/foo/bar" component={FooController} /> 
    </Switch> 
</BrowserRouter> 

そして、あなたの代わりにwebpack.config.js

devServer: { 
    historyApiFallback: true, 
},