web-dev-qa-db-ja.com

react-routerは運用環境およびサージ環境では機能しません

私の反応アプリケーションはlocalhostで正常に動作していますが、gh-pagesまたはサージにデプロイした後、URLを使用してページ間を移動できません。

  • これはプロジェクトリポジトリです link
  • デモURL ここ

ユーザーは右上隅のmenuItemをクリックしてサインアップページに移動できます。しかし、ユーザーが http://chat.susi.ai/signup/ URLを使用すると、404ページが表示されます

インターネットからいくつかの解決策を試しましたが、うまくいきませんでした。

次の質問は次のとおりです。ユーザーが壊れたリンクに移動しようとしたときに表示される404ページを作成しました。これはlocalhostで正常に動作します。しかし、生産されていません。私は this ソリューションを試しましたが、何も変わりませんでした。

これは私のindex.jsファイルの一部です

const App = () => (
    <Router history={hashHistory}>
        <MuiThemeProvider>
            <Switch>
                <Route exact path="/" component={ChatApp} />
                <Route exact path="/signup" component={SignUp} />
                <Route exact path="/logout" component={Logout} />
                <Route exact path="/forgotpwd" component={ForgotPassword} />
                <Route exact path="*" component={NotFound} />

            </Switch>
        </MuiThemeProvider>
    </Router>
);

ReactDOM.render(
    <App />,
    document.getElementById('root')
);

誰かが私の問題のサンプルコードを使って良い解決策を提案できたら、それは私にとって本当に役立つでしょう。

javascriptreactjsreact-routerreact-router-dom
10
isuruAb

これは、ユーザーがそれらのURLに直接アクセスしたときにアプリをブートストラップするindex.htmlが提供されないために発生します。

急増する場合は、 追加する200.htmlファイル に、展開するindex.htmlと同じ内容を含む（または単に200.htmlに名前を変更する）-これを追加します。静的ファイルに対応していないユーザーがアクセスしたURLでユーザーに配信され、アプリの実行が開始されます。

編集：create-react-appを使用しているようです。これは、create-react-appのreact-scriptsパッケージがこれらのリクエストのフォールバックとしてindex.htmlを処理するため、ローカルで開発しているときに機能します。

react-scriptsユーザーガイド には、 GitHubページへのデプロイ時にこれを処理する方法 および surge.sh （上記）に関するセクションがあります。

6
Jonny Buchanan

変更.htaccessファイルをビルドフォルダー内のWebサーバーとしてApacheとして使用した場合、私にとってはうまくいきました：

Options -MultiViews
RewriteEngine On
RewriteCond %{REQUEST_FILENAME} !-f
RewriteRule ^ index.html [QSA,L]
0
Siamak A.Motlagh

私も同じ問題を抱えていました。そして、私はそれを非常に簡単に解決しました... :)

フロントエンド（Create-React-App）とエクスプレスバックエンドでreactを使用しました。開発モードではすべてがうまく機能しますが、プロダクションビルドに切り替えたとき、反応ルーティングにいくつかのルーティング問題がありました。長い調査の後、問題はindex.htmlファイルを提供するサーバー側にあることがわかりました。

すべてのサーバー側ルーティングの後、すべてのapp.postハンドラの前にある必要があります。つまり、次の行は、すべてのapp.getsの後、すべてのapp.postsの前に配置する必要があります。

// PRODUCTION
App.get('*', (req, res)=>{
res.sendFile(path.resolve(where, the, index.html, is))
})
0
Mohammad Ebrahimi