Я пытаюсь обслуживать свое приложение react из Nodejs, но я получаю GET ошибку, которая странна, потому что, когда я запускаю npm start и запускаю сценарий запуска react, все работает хорошо, но как только я использую node.js это не работает. Кроме того, если я перейду к маршруту, введя его или пытаясь перейти назад, это приведет к ошибке. Например, когда вы впервые переходите на домашнюю страницу, вы попадаете на страницу входа в систему, и если я перейду на другую страницу, а затем нажму на нее, она выдаст GET ошибку, даже если она работала заранее.

Node.js Сервер

 const express = require('express');
const cors = require('cors');
const path = require('path');
const app = express();

require('dotenv').config()

app.use(express.static(path.join(__dirname, 'build')));
app.use(express.json());
app.use(cors());



app.get('/', async (req,res) => {

    res.sendFile(path.join(__dirname, 'build', 'index.html'));
    
    });




    app.listen(3000, () => {
        console.log(`Server listening on 3000`);
    });
 

Реагировать index.js

 */
import React from "react";
import ReactDOM from "react-dom";
import { createBrowserHistory } from "history";
import { Router, Route, Switch, Redirect } from "react-router-dom";
import { Auth0Provider } from "@auth0/auth0-react";

// core components
import Admin from "layouts/Admin.js";
import Authentication from 'layouts/Authentication';
import DashboardPage from "views/Dashboard/Dashboard.js";
import UserProfile from "views/UserProfile/UserProfile.js";

import "assets/css/material-dashboard-react.css?v=1.9.0";

const hist = createBrowserHistory();

ReactDOM.render(
  <Auth0Provider
  domain={`${process.env.REACT_APP_Auth0_Domain}`}
  clientId={`${process.env.REACT_APP_Auth0_ClientID}`}
  redirectUri={`http://localhost:3000/dashboard`}
  >
  <Router history={hist}>
    <Switch>
      <Route path="/login"  component={Authentication} />
      <Route path="/dashboard" component={DashboardPage} />
      <Route path="/user"  component={UserProfile} />
      <Redirect from='/' to='/login' />
    </Switch>
  </Router>,
  </Auth0Provider>,
  document.getElementById("root")
);
 

Routes.js

 // @material-ui/icons
import Dashboard from "@material-ui/icons/Dashboard";
import Person from "@material-ui/icons/Person";

// core components/views for Admin layout
import DashboardPage from "views/Dashboard/Dashboard.js";
import UserProfile from "views/UserProfile/UserProfile.js";
import Authentication from './layouts/Authentication';

const dashboardRoutes = [
  {
    path: "/dashboard",
    name: "Invoice Dashboard",
    icon: Dashboard,
    component: DashboardPage,
  },
  {
    path: "/login",
    name: "Login",
    icon: Dashboard,
    component: Authentication
  },
  {
    path: "/user",
    name: "User Profile",
    icon: Person,
    component: UserProfile,
  }
];

export default dashboardRoutes;
 

Такое поведение происходит из вашего express приложения в node.js сервер.

Смотрите ваше заявление:

 app.get('/', async (req,res) => {
  res.sendFile(path.join(__dirname, 'build', 'index.html')); 
});
 

Ваше приложение возвращает index.html файл только тогда, когда вы запрашиваете путь '/' . В принципе, ваш маршрутизатор react устанавливается только с первоначальным запросом '/' , позволяющим элементам react Link (например) после этого правильно маршрутизировать. Это объясняет, почему ввод глубокой ссылки (например '/example-path' ) и нажатие кнопки «Назад» приводят к ошибкам.

Структурируйте свои экспресс-маршруты для обработки определенных URL-адресов и возвращайтесь с index.js файлом для всех остальных. Это позволит маршрутизатору react обрабатывать ваши внешние маршруты и по-прежнему позволит express обрабатывать внутренние маршруты.

 // An example api endpoint that returns a list of items
app.get('/api/getList', (req, res) => {
    var list = ["item1", "item2", "item3"];
    res.json(list);
    console.log('Sent list of items');
});

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