Отправить статус 404 и перенаправить на компонент 404 в реагирующий маршрутизатор

Question

У меня есть установка response-router 3.0.0 с компонентом NotFound, который я показываю как запасной вариант:

<Route component={NotFound} path="*"/>

Однако это возвращает редирект, и сканер Google жалуется на soft 404s. Могу ли я как перенаправить на свой компонент NotFound, так и отправить 404, аналогично тому, что делает, например, Github? Отсюда я попробовал следующее предложение: Как разрешить маршрутизатору реагировать с кодом состояния 404?

<Route component={NotFound} path="*" status={404}/>

Но это просто дает мне 404 без отображения компонента.

Как можно достичь вышеизложенного?

Answer 1

Просто чтобы замкнуть цикл на этом - я не хотел идти по пути рендеринга на стороне сервера, поэтому я реализовал следующее в своем промежуточном программном обеспечении глобального обработчика ошибок:

     if (err.name === 'UnauthorizedError') {
        res.status(401).send(prepareErrorResponse(isXhr, 'Acess Denied'));
      } else if (err.status === 404) {
       res.status(404).send(prepareErrorResponse(isXhr, 'Not Found'));
       if (req.accepts('html')) {
         // Respond with html page.
         fs.readFile(__dirname + '/../404.html'), 'utf-8', function(err, page) {
           res.writeHead(404, {'Content-Type': 'text/html'});
           res.write(page);
           res.end();
         });
       } else {
         if (req.accepts('json')) {
           // Respond with json.
           res.status(404).send({ error: 'Not found' });
         } else {
           // Default to plain-text. send()
           res.status(404).type('txt').send('Not found');
         }
       }
     }

В основном вместо показа NotFound компонент на клиенте (софт 404), я обслуживаю страницу NotFound прямо с сервера (со статусом 404).

Answer 2

Реактивный маршрутизатор v6

Демонстрация в реальном времени: перенаправление по умолчанию или 404 маршрута с помощью React Router

Пример кода:

      <Router>
  <Routes>
    <Route path="users" element={<Users />} />
    <Route path="posts" element={<Posts />} />
  </Routes>
</Router>

Чтобы перенаправить и перейти к одному из выбранных нами маршрутов, мы можем использовать компонент из React Router. Теперь мы можем объявить под нашей конфигурацией маршрута случай для пустых маршрутов, например:

      <Router>
  <Routes>
    <Route path="users" element={<Users />} />
    <Route path="posts" element={<Posts />} />
    <Route path="" element={<Navigate to="/users" />} />
  </Routes>
</Router>