Проблема с React Router при развертывании на сервере Node.js

Question

Я сделал некоторую маршрутизацию для моего ReactJS приложения, оно отлично работает в localhost. Но когда я хочу развернуть его на моем Node.js сервере, я могу получить доступ только к своему root пути '/'. Для другого я получаю это:

Cannot GET /dir/secret/dashboard

Я почти уверен, что сделал что-то не так, но не могу понять, что.

Вот код, где я использую реагирование -route-dom:

index. js

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

import './index.css';

import App from './App';

import Register from './pages/Register';
import Login from './pages/Login';
import Dashboard from './pages/Dashboard';
import Settings from './pages/Settings';

import * as serviceWorker from './serviceWorker';

ReactDOM.render(
    <Router>
        <div>
            <Route exact path='/' component={App} />
            <Route path='/dir/secret/login' component={Login} />
            <Route path="/dir/secret/register" component={Register} />  
            <Route exact path="/dir/secret/dashboard" component={Dashboard} />
            <Route exact path="/dir/secret/dashboard/settings" component={Settings} />      
        </div>
    </Router>, 
    document.getElementById('root')
);

serviceWorker.unregister();

server. js

const express = require('express');
const server = express();
const mongoose = require('mongoose');
const bodyParser = require('body-parser');
const path = require('path');
const cron = require('node-cron');
const axios = require('axios');

const port = 4200;
const cors = require('cors');

mongoose.Promise = require('bluebird');
mongoose.connect('mongodb+srv://***:***@***-hsm29.mongodb.net/test?retryWrites=true&w=majority', {useNewUrlParser: true, useUnifiedTopology: true})
    .then(() => {
        console.log('> Connected to your MongoDB Cluster');
    })
    .catch(err => {
        console.error('App starting error:', err.stack);
        process.exit(1);
    });

const router = require('./routes/router');

const corsOption = {
    origin: '*',
    optionSuccessStatus: 200,
}

server.use(express.static('public'));
server.use(cors(corsOption));
server.use(bodyParser.urlencoded({extended: true}));
server.use(bodyParser.json());

const upload = require('./upload')
server.post('/upload', upload)

const banner = require('./banner')
server.post('/banner', banner)

server.use(express.static(__dirname+'/public'));

server.use('/api', router);

server.use(express.static(path.join(__dirname, 'build')));
-server.get('/', function (req, res) {
+server.get('/*', function (req, res) {
   res.sendFile(path.join(__dirname, 'build', 'index.html'));
 });
});

server.listen(port, function(){
    console.log(`> Ready on http://localhost:${port}`);
});

Заранее благодарим за ваше время и вашу помощь

Answer 1

Хорошо, я исправил свою проблему. Вот изменения, которые я сделал

Индекс. js

import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter} from 'react-router-dom';

import './index.css';

import App from './App';

import * as serviceWorker from './serviceWorker';

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

serviceWorker.unregister();

Приложение. js

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

import Content from './pages/Content';
import Register from './pages/Register';
import Login from './pages/Login';
import Dashboard from './pages/Dashboard';
import Settings from './pages/Settings';

import './App.css';

function App() {
  return (
    <>
      <Router basename={process.env.PUBLIC_URL+'/'}>
        <div className="App">
          <Switch>
            <Route exact path='/' component={Content}/>
            <Route path='/dir/secret/login' component={Login} />
            <Route path="/dir/secret/register" component={Register} />  
            <Route exact path="/dir/secret/dashboard" component={Dashboard} />
            <Route exact path="/dir/secret/dashboard/settings" component={Settings} />      
          </Switch>
        </div>
      </Router>
    </>
  );
}

export default App;

Сервер. js

const express = require('express');
const server = express();
const mongoose = require('mongoose');
const bodyParser = require('body-parser');
const path = require('path');
const cron = require('node-cron');
const axios = require('axios');

const port = 4200;
const cors = require('cors');

mongoose.Promise = require('bluebird');
mongoose.connect('mongodb+srv://***:***@***-hsm29.mongodb.net/test?retryWrites=true&w=majority', {useNewUrlParser: true, useUnifiedTopology: true})
    .then(() => {
        console.log('> Connected to your MongoDB Cluster');
    })
    .catch(err => {
        console.error('App starting error:', err.stack);
        process.exit(1);
    });

const router = require('./routes/router');

const corsOption = {
    origin: '*',
    optionSuccessStatus: 200,
}

server.use(express.static('public'));
server.use(cors(corsOption));
server.use(bodyParser.urlencoded({extended: true}));
server.use(bodyParser.json());

const upload = require('./upload')
server.post('/upload', upload)

const banner = require('./banner')
server.post('/banner', banner)

server.use(express.static(__dirname+'/public'));

server.use('/api', router);

server.use(express.static(path.join(__dirname, 'build')));
server.get('/*', function(req, res) {
    res.sendFile(path.join(__dirname, 'build', 'index.html'));
});

server.listen(port, function(){
    console.log(`> Ready on http://localhost:${port}`);
});

Итак, я изменил всю мою маршрутизацию, чтобы она соответствовала документации по activ-router-dom, и я просто изменил это:

server.use(express.static(path.join(__dirname, 'build')));
-server.get('/', function (req, res) {
+server.get('/*', function (req, res) {
   res.sendFile(path.join(__dirname, 'build', 'index.html'));
 });

на это:

server.use(express.static(path.join(__dirname, 'build')));
server.get('/*', function(req, res) {
    res.sendFile(path.join(__dirname, 'build', 'index.html'));
});

i Я уверен, что есть лучший способ сделать то, что я хочу, но факт в том, что этот способ работает для меня, так что, если он может кому-нибудь помочь.