NodeJS с ReactJS + React-Router-Dom работает некорректно

Question

У меня есть приложение, использующее ReactJS + ReactRouterDom.

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

import React from 'react';

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

import IndexPage      from './pages/IndexPage';
import LoginPage      from './pages/LoginPage';
import ContactsPage   from './pages/ContactsPage';
import AboutPage      from './pages/AboutPage';

function App() {
  return (
  <Router>
    <Switch>
        <Route path="/" exact>
            <IndexPage />
        </Route>

        <Route path="/about">
            <AboutPage />
        </Route>

        <Route path="/about/story">
            <AboutPage />
        </Route>

        <Route path="/login">
            <LoginPage />
        </Route>

        <Route path="/contacts">
            <ContactsPage />
        </Route>
    </Switch>
      </Router>
  );
}

Основная проблема заключается в том, когда я запускаю приложение, используя начало пряжи все отлично работает.

Когда я пытаюсь запустить с express, отображается ошибка 404 на любой странице, кроме индекса

const express = require('express')
const path = require('path')
const PORT = process.env.PORT || 5000

express()
  .use(express.static(path.join(__dirname, 'public')))
  .get('/', (req, res) => res.render('public/index.html'))
  .listen(PORT, () => console.log(`Listening on ${ PORT }`))

Спасибо за ответ!

Answer 1

На express коде сервера. Вам также придется обрабатывать другие страницы.

Ваш текущий код будет работать для других страниц, когда вы будете перенаправлять из приложения, но вы получите 404 при прямом нажатии на URL с браузер.

Попробуйте добавить / обработать * url на express сервере и отобразить index.js на нем. Он будет перехватывать все URL и отображать для них одну и ту же страницу реакции. Вы можете обрабатывать 404 в маршрутизаторе React

app.get('*', function (req, res) {
  res.render('public/index.html')
})