React возвращает 200 для страницы, не найденной? - PullRequest
Новая
       37

React возвращает 200 для страницы, не найденной?

0 голосов
/ 16 февраля 2019

Я искал возможность react-router.Чтобы создать «страницу, не найденную», вы используете <Switch> с последней записью, для которой задан весь перехват, например: 

<Switch>
  <Route path="/" component={Home}/>
  [...snip...]
  <Route component={PageNotFound}/>
</Switch>

Однако это означает, что сервер только что возвратил ответ 200 OK наклиент.С точки зрения SEO или просто «давайте следовать правилам HTTP», я думаю, что он нарушен.

Это норма для одностраничных веб-сайтов?Возвращая soft 404 ?

Обратите внимание, что это произойдет, если пользователь перейдет по внешней ссылке с другого веб-сайта на страницу моего веб-сайта React App, страницу, которая былаудалены или никогда не существовали.При нажатии на ссылки в приложении, это не имеет значения.Я не вижу способа заставить React возвращать 404, когда путь неправильный .Я прав?

1 Ответ

0 голосов
/ 16 февраля 2019

Как перенаправить с правильным кодом состояния HTTP, обсуждается в части документации Сервер рендеринга .Вы можете сделать что-то вроде следующего: 

const RedirectWithStatus = ({ to, status }) => (
  <Route render={({ staticContext }) => {
    // There is no `staticContext` on the client, so
    // we need to guard against that here
    if (staticContext)
      staticContext.status = status
    return <Redirect to={to}/>
  }}/>
)

const PageNotFound = () => (
  <RedirectWithStatus
    status={302}
    to="/"
  />
)

// Somewhere else in your app
<Switch>
  <Route path="/" component={Home}/>
  {/* ... */}
  <Route component={PageNotFound}/>
</Switch>

// On the server
const { createServer } = require('http')
const React = require('react');
const ReactDOMServer = require('react-dom/server');
const { StaticRouter } = require('react-router');
const App = require('./App');

createServer((req, res) => {
  const context = {}

  const html = ReactDOMServer.renderToString(
    <StaticRouter
      location={req.url}
      context={context}
    >
      <App/>
    </StaticRouter>
  )

  if (context.url) {
    res.writeHead(context.status, {
      Location: context.url
    })
    res.end()
  } else {
    res.write(`
      <!doctype html>
      <div id="app">${html}</div>
    `)
    res.end()
  }
}).listen(3000)
...