React Router無法在本地主機和遠程配置URL。收到404未找到錯誤

Question

我遇到了奇怪的情況。我相信這個問題與React Router V4配置有關。

我正在使用react-router-modal和React Router v4。與react-router-modal組件我呈現一個鏈接到一個模態窗口，它有它自己的唯一URL。一旦點擊了一個模式的鏈接 - 模式打開並且URL被添加到地址欄中。所以我甚至可以通過這個URL從一個新標籤訪問模式窗口：http://localhost:8080/modal_1 URL對我來說非常重要。

在dev模式下（npm start）一切正常，一旦輸入無效的URL，頁面剛剛重新加載，無效的URL保留在地址欄中。 （不是最好的情況）

我認爲所有東西都會像生產版本一樣工作。但這是一個問題。一旦最終版本上傳到遠程服務器或本地主機，我得到這些錯誤：
1.一旦輸入無效的URL - 我收到404沒有找到
2.一旦我嘗試訪問一個模式與一個直接的URL（不在加載頁面點擊）http://localhost:8080/modal_1 - 404未找到

沒有的.htaccess上傳

的index.js非常簡單，整個程序是onepage各種組件：

import React from 'react'; 
import ReactDOM from 'react-dom'; 
import { BrowserRouter, Route, Switch } from 'react-router-dom'; 
import { ModalContainer } from 'react-router-modal'; 
import LandingPage from './components/villages/Landing Page.js'; 
import WOW from 'wowjs'; 

import { I18nextProvider } from 'react-i18next'; 
import i18n from './i18n'; 

class App extends React.Component { 
    componentDidMount() { 
    new WOW.WOW().init(); 
    } 

    render() { 
    return (
     <div> 
     <LandingPage />   
     </div> 
    ) 
    } 
} 

ReactDOM.render(
    <I18nextProvider i18n={i18n}> 
    <BrowserRouter> 
     <div> 
     <App /> 
     <ModalContainer /> 
     </div> 
    </BrowserRouter> 
    </I18nextProvider>, 
    document.getElementById('app') 
); 

和組件女巫呈現模態的樣子：

import React from 'react'; 
import ReactDOM from 'react-dom'; 
import { ModalRoute, ModalLink } from 'react-router-modal'; 
import { Link } from 'react-router-dom'; 
import ImageLoader from 'react-load-image'; 

function Preloader(props) { 
    return <img src="img/spinner.gif" className="img-responsive center-block image-loader" />; 
} 

function ModalOne(props) { 
    const { t } = props; 
    return (
    <div className='basic__modal-content'> 
    ... 
    </div> 
); 
} 
const ExtendedModalOne = translate()(ModalOne); 


class Items extends React.Component { 

    render() { 
    const { t } = this.props; 
    return (
     <div className="container"> 
     <ul> 
      <div id="works"> 
      <li> 
       <Link to="/modal_1"> <img src="img/" /> </Link> 
       <h3>Name</h3> 
      </li> 
      </div> 
     </ul> 
     <ModalLink component={ExtendedModalOne} path={`/modal_1`} /> 
     <ModalLink component={ExtendedModalTwo} path={`/modal_2`} />   
     </div> 
    ) 
    } 
} 

module.exports = translate()(Items); 

和webpack.config：

const path = require('path'); 
const webpack = require('webpack'); 
const HtmlWebpackPlugin = require('html-webpack-plugin'); 
const ExtractTextPlugin = require('extract-text-webpack-plugin'); 
const PreloadWebpackPlugin = require('preload-webpack-plugin'); 
const ScriptExtHtmlWebpackPlugin = require('script-ext-html-webpack-plugin'); 
const StyleExtHtmlWebpackPlugin = require('style-ext-html-webpack-plugin'); 
const CompressionPlugin = require('compression-webpack-plugin'); 
const autoprefixer = require('autoprefixer'); 

const staticSourcePath = path.join(__dirname, 'css'); 
const sourcePath = path.join(__dirname); 
const buildPath = path.join(__dirname, 'dist'); 

module.exports = { 
    stats: { 
    warnings: false 
}, 
    devtool: 'cheap-module-source-map', 
     devServer: {  
     historyApiFallback: true, 
     contentBase: './' 
    }, 
    entry: { 
     app: path.resolve(sourcePath, 'index.js') 
    }, 
    output: { 
     path: path.join(__dirname, 'dist'), 
     filename: '[name].[chunkhash].js', 
     publicPath: '/' 
    }, 
    resolve: { 
     extensions: ['.webpack-loader.js', '.web-loader.js', '.loader.js', '.js', '.jsx'], 
     modules: [ 
      sourcePath, 
      path.resolve(__dirname, 'node_modules') 
     ] 
    }, 
    plugins: [ 
     new webpack.DefinePlugin({ 
      'process.env.NODE_ENV': JSON.stringify('production') 
     }), 
     new webpack.optimize.ModuleConcatenationPlugin(), 
     new webpack.optimize.CommonsChunkPlugin({ 
      name: 'vendor', 
      filename: 'vendor.[chunkhash].js', 
      minChunks (module) { 
       return module.context && module.context.indexOf('node_modules') >= 0; 
      } 
     }), 
     new webpack.LoaderOptionsPlugin({ 
      options: { 
       postcss: [ 
        autoprefixer({ 
         browsers: [ 
          'last 3 version', 
          'ie >= 10' 
         ] 
        }) 
       ], 
       context: staticSourcePath 
      } 
     }), 
     new webpack.HashedModuleIdsPlugin(), 
     new HtmlWebpackPlugin({ 
      template: path.join(__dirname, 'index.html'), 
      path: buildPath, 
      excludeChunks: ['base'], 
      filename: 'index.html', 
      minify: { 
       collapseWhitespace: true, 
       collapseInlineTagWhitespace: true, 
       removeComments: true, 
       removeRedundantAttributes: true 
      } 
     }), 
     new PreloadWebpackPlugin({ 
      rel: 'preload', 
      as: 'script', 
      include: 'all', 
      fileBlacklist: [/\.(css|map)$/, /base?.+/] 
     }), 
     new webpack.NoEmitOnErrorsPlugin(), 
     new CompressionPlugin({ 
      asset: '[path].gz[query]', 
      algorithm: 'gzip', 
      test: /\.js$|\.css$|\.html$|\.eot?.+$|\.ttf?.+$|\.woff?.+$|\.svg?.+$/, 
      threshold: 10240, 
      minRatio: 0.8 
     }) 
    ], 
    module: { 
     rules: [ 
      { 
       test: /\.(js|jsx)$/, 
       exclude: /node_modules/, 
       use: { 
        loader: 'babel-loader', 
        options: { 
        presets: ['env', 'react'] 
        } 
       }, 
       include: sourcePath 
      }, 
      { 
       test: /\.(eot?.+|svg?.+|ttf?.+|otf?.+|woff?.+|woff2?.+)$/, 
       use: 'file-loader?name=assets/[name]-[hash].[ext]' 
      }, 
      { 
       test: /\.(png|gif|jpg|svg)$/, 
       use: [ 
        'url-loader?limit=20480&name=assets/[name]-[hash].[ext]' 
       ], 
       include: staticSourcePath 
      } 
     ] 
    } 
}; 

Answer 1

你的HTTP服務器應該總是發送index.html文件的任何途徑。

例快遞的NodeJS配置：

// ... 
const app = express(); 

app.get('*', (req, res) => { 
    res.sendFile('path/to/your/index.html') 
}) 

// ... 

據我所知，Apache服務器，你可以使用：

RewriteEngine On 
RewriteBase/
RewriteRule ^index\.html$ - [L] 
RewriteCond %{REQUEST_FILENAME} !-f 
RewriteCond %{REQUEST_FILENAME} !-d 
RewriteRule . /index.html [L] 

它告訴給Apache服務器重寫一切index.html頁面文件並讓客戶端處理路由。