React ReduxをbuildしてWebサーバへのデプロイした時にルーティングができません
解決したいこと
React Redux を使用して始めてSPAを作っています。
・connected-react-router
・react-router
でルーティングを実現しています。
ローカル環境では問題なくページ遷移するのですが、buildしてWebサーバにアップロードするとルーティングが反映されません。
ルーティングできるようにbuildする解決法を教えてもらいたいです。
Webサーバのファイルにアクセスすると、h1タグのAPPという文字は表示されています。
また、URL/loginにアクセスしても404ではなくAPPという文字が表示されています。
そもそも、Reactで作成したSPAはbuildしてWebサーバにアップロード（デプロイ）するという考え自体から間違っているのでしょうか？
宜しくお願いします。
App.js
import React from 'react'
import Router from './Router'
const App = () =>
{
return(
<main>
<h1>APP</h1>
<Router />
</main>
)
}
export default App
index.js
import React from 'react';
import ReactDOM from 'react-dom';
import {Provider} from 'react-redux';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
import {ConnectedRouter} from 'connected-react-router';
import * as History from 'history';
import createStore from './reducks/store/store';
const history = History.createBrowserHistory();
export const store = createStore(history)
ReactDOM.render(
<Provider store={store}>
<ConnectedRouter history={history}>
<App />
</ConnectedRouter>
</Provider>,
document.getElementById('root')
);
reportWebVitals();
Router.jsx
import React from 'react';
import {Route, Switch} from "react-router";
import {
Home,
Login
} from "./templates";
const Router = () =>
{
return(
<Switch>
<Route exact path="(/)?" component={Home} />
<Route exact path="/login" component={Login} />
</Switch>
)
}
export default Router
0