リアクションルータのみがリンク先で動作し、URLまたはリフレッシュでは動作しません

Question

ここで何が起こっているのかよくわかりません。私はルーティングを設定して、最初のページlocalhost：8080 /に行くと、最初のルートは期待どおりにレンダリングされます。しかし、私がlocalhost：8080/storeにurlを入力すると、予想されるルートが失敗し、404が見つからない（見つからないコンポーネントにもフォールバックしない）というメッセージが表示されます。

リンクを設定してリンクをクリックすると、期待通りに私の店舗ルートがレンダリングされます。

/storeは、URLに入力されたか要素へのリンクを介して選択されても、StorePickerコンポーネントをレンダリングしないでください。

App.js

import React, { Component } from 'react'; 
import ReactDOM, { render } from 'react-dom'; 
import { BrowserRouter as Router, Route, Link, Switch } from 'react-router-dom'; 

//Components 
import StorePicker from './components/StorePicker.js'; 
import Main from './components/Main'; 
import NotFound from './components/NotFound'; 

const Routes =() => { 
    return (
     <Router> 
      <div> 
       <Link to="/store">Store</Link> 

       <Switch> 
        <Route path="/" exact component={StorePicker} /> 
        <Route path="/store" component={Main} /> 
        <Route component={NotFound} /> 
       </Switch> 
      </div> 

     </Router> 
    ) 
} 

render(<Routes />, document.querySelector('#container')); 

Answer 1

あなたはWebPACKのを使用していると仮定。もしそうなら、Webpackの設定にいくつか追加して問題を解決する必要があります。具体的には、output.publicPath = '/',devServer.historyApiFallback = trueである。

var path = require('path'); 
var HtmlWebpackPlugin = require('html-webpack-plugin'); 

module.exports = { 
    entry: './app/index.js', 
    output: { 
    path: path.resolve(__dirname, 'dist'), 
    filename: 'index_bundle.js', 
    publicPath: '/' 
    }, 
    module: { 
    rules: [ 
     { test: /\.(js)$/, use: 'babel-loader' }, 
     { test: /\.css$/, use: [ 'style-loader', 'css-loader' ]} 
    ] 
    }, 
    devServer: { 
    historyApiFallback: true, 
    }, 
    plugins: [ 
    new HtmlWebpackPlugin({ 
     template: 'app/index.html' 
    }) 
    ] 
};