Обслуживающие сборки реагируют с рельсами

Question

Проблема связана с реакцией-маршрутизатором-домом.Это очень хорошо работает с внутренними ссылками, но не больше, чем все, когда я обновляю или открываю URL-адрес извне.

Затем я сталкиваюсь с белым экраном

Я пытался с hashHistoryи это работает намного лучше.однако мне не нравится #, который помещает в середину URL

Рельсы маршрутизатора

Rails.application.routes.draw do
  namespace :api do
    namespace :v1 do
      get :todos, to: "todos#index"
    end
  end

  get '*path', to: "application#fallback_index_html", constraints: ->(request) do
    !request.xhr? && request.format.html?
  end
end

ApplicationController.rb

class ApplicationController < ActionController::API
  def fallback_index_html
    render :file => 'public/index.html'
  end
end

мой компонент реакции App.js

import React, { useState } from 'react';
import { Router, Switch, Route, Link } from 'react-router-dom';
import { createHashHistory } from 'history';
import './App.css';

const hashHistory = createHashHistory({});

function Home() {
  console.log('Home');
  return <p>Home <Link to="/gallery" >Gallery</Link></p>;
}
function Test() {
  console.log('Home');
  return <p>Home <Link to="/gallery" >Test</Link></p>;
}
function Config() {
  console.log('Config');
  return <p>Config</p>;
}
function Gallery() {
  console.log('Gallery');
  return <p>Gallery <Link to="/gallery/test" >Gallery-test</Link></p>;
}

function App() {
  console.log('App');
  const [todos, setTodos] = useState([]);
  const fetchTodos = async () => {
    fetch('/api/v1/todos')
      .then(res => res.json())
      .then(data => setTodos(data.todos));
  };

  return (
    <Router history={hashHistory}>
      <div className="App">
        <header className="App-header">
          <Switch>
            <Route exact path="/" component={Home} />
            <Route exact path="/config" component={Config} />
            <Route exact path="/gallery" component={Gallery} />
            <Route exact path="/gallery/test" render={() => <p>Nested Ntested</p>} />
          </Switch>
          <button onClick={fetchTodos}>FETCH</button>
          <ul>
            {
              todos.map((todo, idx) => {
                return <li key={idx} >{todo}</li>;
              })
            }
          </ul>
        </header>
      </div>
    </Router>
  );
}

export default App;