React Routing работает локально, но не на моем веб-хостинге.

Question

У меня есть приложение React, которое отлично работает на моем локальном компьютере, но мой маршрут не работает на моем веб-хостинге (веб-облако OVH).

Я проверил много постов, в которых говорится об этом, и пытался следовать их рекомендациям, но мне кажется, что я что-то упустил

Если я хорошо понимаю, я не могу получить доступ к www.mysite/login потому что в моем dist папки нет login.html,

Поэтому я попытался создать static.json как это

{
    "root": "dist/",
    "clean_urls": false,
    "routes": {
      "/**": "index.html"
    }
  }

и .htaccess в моем публичном хранилище

Options -MultiViews
    RewriteEngine On
    RewriteCond %{REQUEST_FILENAME} !-f
    RewriteRule ^ index.html [QSA,L]

вот мой index.js

ReactDOM.render(
  <BrowserRouter>
      <App />
  </BrowserRouter>, 
  document.getElementById('root'))

вот мой App.js

class App extends Component {

    render() {
        return (
            <IntlProvider locale={language} messages={messages}>
                <div className="App">
                    <div className="App-content">
                        <div className="menu">
                            <Navbar handleLanguage={langValue => this.langChange(langValue)} language={language} />
                        </div>
                        <Main language={language}/>
                    </div>
                </div>
            </IntlProvider>
        );

а вот мой Main.jsx

export class Main extends React.Component {
    render (){
        return (
            <Switch>
                <Route exact path="/" render={(props) => <Home {...props} language={this.props.language}/>} ></Route>
                <Route path='/login' component={Login} ></Route>
            </Switch>
        );
    }
}

Я думаю, смогу ли я использовать кнопку, которая делает this.props.history.push('/login') Я получу доступ к своей странице входа в систему, но на самом деле я не могу сделать такую ​​кнопку на главной странице, но это еще одна проблема.

Ты знаешь, что я что-то упустил или нет? потому что я борюсь с 5 часов, и я думаю, что я проверил каждый пост об этой проблеме, даже официальный документ.

Спасибо за помощь

РЕДАКТИРОВАТЬ:

Я забыл показать свою экспресс-конфигурацию для этого

//app.js
const express = require('express');
const http = require('http');
const path = require('path');

let app = express();
app.use(express.static(path.join(__dirname, 'dist')));

// Handles any requests that don't match the ones above
app.get('/*', (req,res) =>{
    res.sendFile(path.join(__dirname, 'dist', 'index.html'));
});

const port = process.env.PORT || '8080';
app.set('port', port);
const server = http.createServer(app);
server.listen(port, () => console.log(`Running on localhost:${port}`));

Answer 1

Все, что вы запрашиваете, должно идти в index.html, который является отправной точкой для вашего приложения.

установить маршрутизатор с приведенной ниже конфигурацией.

<BrowserRouter basename="/directory-name">
 <App/>
</BrowserRouter>