Herokuにデプロイ後, react-routerが動作しない

現在rails APIとcreate-react-appで用意したreactを使用して開発をしています。
Herokuにデプロイしたのち、react-routerを動かそうとしていますが上手くいきません。どなたかご教授お願いします。また、react-routerとrailsのルーティングのソースコードは以下の通りです。

src/App.js

React.js
1import './App.css';
2import {
3  BrowserRouter as Router,
4  Switch,
5  Route,
6} from "react-router-dom";
7
8// components
9import { Restaurants } from './containers/Restaurants.jsx';
10import { Foods } from './containers/Foods.jsx';
11import { Orders } from './containers/Orders.jsx';
12
13function App() {
14  return (
15    <Router>
16      <Switch>
17        <Route
18          exact
19          path="/">
20          <Restaurants />
21        </Route>
22
23        <Route
24          exact
25          path="/restaurants">
26          <Restaurants />
27        </Route>
28
29        <Route
30          exact
31          path="/foods"
32        >
33          <Foods />
34        </Route>
35
36        <Route
37          exact
38          path="/orders">
39          <Orders />
40        </Route>
41
42        <Route
43          exact
44          path="/restaurants/:restaurantId/foods"
45          render={({ match }) =>
46            < Foods
47              match={match}
48            />
49          }
50        />
51
52
53      </Switch>
54    </Router>
55  );
56}
57
58export default App;

config/routes.rb

Rails.application.routes.draw do
  namespace :api do
    namespace :v1 do
      resources :restaurants do
        resources :foods, only: %i[index]
      end
      resources :line_foods, only: %i[index create]
      put 'line_foods/replace', to: 'line_foods#replace'
      resources :orders, only: %i[create]
    end
  end
end