React Single Pageアプリをブラウザで利用できますか？

Question

私はhashHistoryからreact-routerを使って反応単一ページアプリケーションを構築していましたが、次のようなURLの末尾のコードを削除するまではうまくいきました。#/?_k=ncbx6v

私が遭遇したのは、browserHistoryに移行することでしたが、すべての例と解決策にとhistory-api-fallbackをtrueに設定する必要があることに気付きました。私はこのアプローチを試してみましたが、それはうまくいった（localhost）が、スタンドアロンのbundle.jsファイル+ index.htmlは動作しなくなりました。

私はWebPACKのを実行して、HTMLファイルを開くと、私はコンソールにこのエラーが表示されます。 Warning: [react-router] Location "/Users/mike/project/index.html" did not match any routes

私は問題の背後にある仕組みに慣れていないけど、解決策がそこにあります場合、私は好奇心が強いです私は慣れていない。

これは私のWebPACKファイルです：

const {resolve} = require('path') 

module.exports =() => { 
    return { 
    context: resolve('src'), 
    entry: './app', 
    output: { 
     path: resolve('public'), 
     filename: 'bundle.js', 
     publicPath: '/public/' 
    }, 
    resolve: { 
     extensions: ['.js', '.jsx', '.json'] 
    }, 
    stats: { 
     colors: true, 
     reasons: true, 
     chunks: false 
    }, 
    module: { 
     rules: [ 
     {enforce: 'pre', test: /\.jsx?$/, loader: 'eslint-loader', exclude: [/node_modules/]}, 
     {test: /\.jsx?$/,loader: 'babel-loader', include: /src/, exclude: /node_modules/ 
     }, 
     {test: /\.json$/, loader: 'json-loader'}, 
     {test: /(\.css)$/, loaders: ['style-loader', 'css-loader']}, 
     {test: /\.eot(\?v=\d+\.\d+\.\d+)?$/, loader: "file-loader"}, 
     {test: /\.(woff|woff2)$/, loader: "url-loader?prefix=font/&limit=5000"}, 
     {test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/, loader: "url-loader?limit=10000&mimetype=application/octet-stream"}, 
     {test: /\.svg(\?v=\d+\.\d+\.\d+)?$/, loader: "url-loader?limit=10000&mimetype=image/svg+xml"} 
     ] 
    } 
    } 
} 

そして、これが私のapp.jsです：ブラウザの履歴を使用するためには

'use strict' 
import React from 'react' 
import ReactDOM from 'react-dom' 
import Layout from './components/common/Layout' 
import { Router, Route, IndexRoute, browserHistory } from 'react-router' 
import configureStore from './store/configureStore' 
import { Provider } from 'react-redux' 

const store = configureStore() 

class App extends React.Component { 
    render() { 
    return (
     <Provider store={store}> 
     <Router history={browserHistory}> 
      <Route path='/' component={Layout}></Route> 
     </Router> 
     </Provider> 
    ) 
    } 
} 

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

Answer 1

、あなたはのルーティングを扱うことができるバックエンドが必要になりますすべてのあなたの可能なルート。ルーティングをサポートできるバックエンドを計画していない場合（たとえば、静的ファイルを提供するなど）、ハッシュ履歴に固執する必要があります。

ブラウザ履歴の基本的な説明は、現在のURLのpathnameを見て、それを既知のルートと照合しようとすることです。付属のエラーで、pathnameは/Users/mike/project/index.htmlです。これは、React RouterがそのURLと一致するためには、のpath（または一連の入れ子の<Route>）を/Users/mike/project/index.htmlと定義しなければならないことを意味します。

<Route path='Users/mike/project/index.html' component={App} /> 

それだけでpathname後にハッシュ記号を追加し、その後下がるものによってルートを決定するので、ハッシュ履歴は静的ファイルで動作します。

質問キー（?_k=jkadjlkd）が好きではない場合は、create your history instanceのときには含めないように指定できます。 URLにはまだ#が含まれていますが、キー「ジャンク」が添付されていません。

import { Router, useRouterHistory } from 'react-router' 
import { createHashHistory } from 'history' 

const appHistory = useRouterHistory(createHashHistory)({ queryKey: false }) 
<Router history={appHistory} />