Как переопределить Express API-маршруты с помощью React Router

Question

У меня есть приложение, которое использует React Routes, и его сборка обслуживается сервером Express, где у меня также есть маршруты для вызовов API.

Сервер. js

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

const app = express()

// Serving Static Files and React
app.use(express.static(path.join(__dirname, 'client/build')));

app.get('*', function(req, res) {
  res.sendFile(path.join(__dirname, 'client/build', 'index.html'));
});

app.use('/api/files', require('./routes/files'))
app.use('/api/apartments', require('./routes/apartments'))
app.use('/api/keys', require('./routes/keys'))
app.use('/api/guests', require('./routes/guests'))
app.use('/api/transfers', require('./routes/transfers'))
app.use('/api/logs', require('./routes/logs'))
app.use('/api/auth', require('./routes/auth'))


const PORT = process.env.PORT || 5000
app.listen(PORT, () => console.log(`Server started on port ${PORT}`))

Работает нормально, до того момента, как я go до http://localhost: 5000 / api / apartments - это приложение sh, а просто пустое JSON из API (но это логично, я думаю)

У меня есть настройки в маршрутизаторе для обработки 404. Если вы go http://localhost: 5000 / API / , это приведет к 404 в приложении React.

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

<Switch>
              <Route exact path='/' component={Home} />
              <Route exact path='/login' component={Login} />
              <Route exact path='/auth' component={Auth} />
              <Route exact path='/guest' component={Guest} />
              <PrivateRoute exact path='/guests/list' component={GuestList} />
              <PrivateRoute exact path='/apartments/' component={Apartments} />
              <PrivateRoute exact path='/apartments/:name' component={Apartment} />
              <PrivateRoute exact path='/keys' component={Keys} />
              <PrivateRoute exact path='/logs' component={Logs} />
              <PrivateRoute exact path='/manager' component={Manager} />
              <PrivateRoute exact path='/upload' component={UploadForm} />

              <Route component={ErrorPage} />
            </Switch>

Возможно ли сделать / api / apartments handle 404 в качестве приложения React или это более правильный способ обслуживания статистики c строить через отдельный сервер?

Answer 1

Возможно, это не лучшее решение, но оно может быть для вас приемлемым

Вы можете создать промежуточное программное обеспечение, а затем проверить, является ли это запросом ajax / xhr, это означает, что вы можете безопасно вернуть ответ API согласно url, и если это не так, и пользователь нажал какой-то URL, например /api/apartments, поскольку это не запрос ajax, вы можете вернуть файл index.html, а затем реагирующий маршрутизатор будет обрабатывать маршруты на основе вашей логики c. В конце вы можете добавить перенаправление на / в маршрутах.

function reactAppMiddleware(req, res, next) {
  if (req.xhr || req.headers.accept.indexOf('json') > -1) {
    // if it is an ajax/xhr request, you can even right your custom logic, maybe look for some header
     next();
  } else {
     // Return react app
     res.sendFile(path.join(__dirname, 'client/build', 'index.html'));
  }
}

app.use(reactAppMiddleware) 

Answer 2

Создание маршрута ошибки и перенаправление с сервера.

<Switch>
    <Route exact path='/' component={Home} />

    <PrivateRoute exact path='/manager' component={Manager} />
    <PrivateRoute exact path='/upload' component={UploadForm} />

    <Route exact path='/404' component={ErrorPage} />
</Switch>

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

//The 404 Route (ALWAYS Keep this as the last route)
app.get('*', function(req, res){
  res.redirect('/404');
});