리액트 라우터가 404 상태 코드로 응답하도록 하려면 어떻게 해야 합니까?

리액트 라우터가 404 상태 코드로 응답하도록 하려면 어떻게 해야 합니까?

리액트 라우터를 루트로 사용하고 있으며 "/" 아래의 모든 요구는 리액트 라우터로 유도됩니다.리액트 라우터는 URL이 정의된 컴포넌트와 일치하지 않는 것을 발견하면 NoMatch 컴포넌트를 사용하여 렌더링합니다.여기서 문제가 발생합니다. No Match가 렌더링되어 제가 원하는 것입니다만, 상태 코드는 404가 아닌 200입니다.잘못된 URL 리액트라우터를 사용하여 css 또는 js 파일을 배치하면 200으로 응답합니다.그러면 페이지에 리소스 컨텐츠 유형에 문제가 있다고 표시됩니다.

그러면 리액트 라우터를 사용하여 "/" 내의 모든 것을 처리하면서 404 오류를 올바르게 처리(404 상태 코드로 응답)하려면 어떻게 해야 할까요?

리액트 라우터의 코드

render((
  <Router history={browserHistory}>
    <Route path="/" component={App}>
      <IndexRoute component={Index}/>
      <Route path="archived" component={App}>
        <IndexRoute component={ArchivedPage}/>
        <Route path="project/:projectId" component={ArchivedDetailPage}/>
      </Route>
      <Route path="*" component={NoMatch}/>
    </Route>
  </Router>
), document.getElementById('app'));

노예 쪽

  router.use('/', function(req, res, next) {
    res.render('index-react', {
      title: 'some title'
    });
  });

리액트 라우터 2.0.0에서는 다음 작업을 수행할 수 있습니다.

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

편집:

필요한 것은 위의 (상태)와 같이 루트 정의에 커스텀아트리뷰트를 작성하는 것입니다.

서버측에서 컴포넌트를 렌더링하는 경우는, 다음의 어트리뷰트를 체크하고, 다음의 어트리뷰트의 코드를 포함한 응답을 송신합니다.

routes.displaces

import React from 'react';
import {IndexRoute, Route} from 'react-router';

import {
    App,
    Home,
    Post,
    NotFound,
} from 'containerComponents';

export default () => {
    return (
    <Route path="/" component={App}>

        <IndexRoute component={Home} />
        <Route path='post/' component={Post} />

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

    </Route>
  );
};

server.displays:

import { match } from 'react-router';
import getRoutes from './routes';
....
app.use((req, res) => {
match({ history, routes: getRoutes(), location: req.originalUrl }, (error, 
        redirectLocation, renderProps) => {
        if (redirectLocation) {
          res.redirect(redirectLocation.pathname + redirectLocation.search);
        } else if (error) {
          console.error('ROUTER ERROR:', error);
          res.status(500);
        } else if (renderProps) {

            const is404 = renderProps.routes.find(r => r.status === 404) !== undefined;
        }
        if (is404) {
          res.status(404).send('Not found');
        } else {
            //Go on and render the freaking component...
        }
    });
});

미안해요...확실히 솔루션 자체로는 작동하지 않았고, 실제로 이 속성을 확인하고 그에 따라 렌더링하는 적절한 코드를 놓쳤습니다.

보시다시피 클라이언트에 '찾을 수 없음' 텍스트를 보낼 뿐이지만, 렌더프로프(이 경우 NoMatch)에서 렌더링할 컴포넌트를 잡아 렌더링하는 것이 가장 좋습니다.

건배.

제가 좀 파헤쳤는데, 이게 v4 릴리즈에서 우리가 하는 방식이에요.

<Route
  render={({ staticContext }) => {
    if (staticContext) {
      staticContext.statusCode = 404
    }
    return <NotFound />
  }}
/>

Route는 " "에 위해 됩니다.staticContextstatusCode하는 할 수 StaticRouter렌더링할 컴포넌트를 지정합니다.

서버 코드는 다음과 같습니다(일부 TypeScript 입력).

const currentLocation: Location = {
  pathname: req.pathname,
  search: req.search,
  hash: '',
  state: undefined
}

const staticRouterContext: StaticContext & StaticRouterContext = {}

ReactDOMServer.renderToString(
  <StaticRouter location={currentLocation} context={staticRouterContext}>
  ...
  </StaticRouter>
)

if (staticRouterContext.statusCode) {
  res.status(staticRouterContext.statusCode)
}

주의: 오타가 좀 이상한 것 같아요.StaticRouterContext를 가지고 있지 않다.statusCode from의 지주.StaticContext인터페이스입니다.오타가 틀렸을 수도 있어요.그래도 이건 잘 작동하는데요.

사일런트 네트워크의 에러 코드는 무엇입니까?

저도 이 문제에 대해 고민했어요.이상한 경우 HTTP 오류 코드를 변경하지 않습니다.랜덤 URL이 호출되었기 때문에 그래야 한다고 생각합니다만, 그 이유는 무엇입니까?

SPA(Single Page Application)에서는 네트워크트래픽이 없고 페인의 전환만 이루어집니다.HTTP 에러 코드는, 새로운 페이지를 제공하기 위한 헤더에 있습니다만, 모든 컨텐츠는 이름 붙여져 있습니다.<div>새 페이지를 새로고침하지 않습니다.404 리턴 코드를 가지려면 페이지를 던지고 새 페이지를 전송 및 렌더링한 후 사용자가 이동하면 원래 페이지를 다시 보내야 합니다.

그리고 유일한 사용자입니다.404 오류 코드 또는 기타 HTTP 코드는 브라우저 또는 서비스에 대한 힌트입니다.요청자가 브라우저일 경우, 사용자는 브라우저가 제공할 수 있는 것보다 더 나은 정보를 얻을 수 있습니다.요구자가 크롤러일 경우 아마도 404를 스캔합니다.<h1>s. 요청자가 당신의 웹사이트를 API로 사용하고 있다면 왜 그것이 좋은 것일까요?

정답은 HTTP 상태 코드를 습관적으로 설정하는 것입니다.하지 마.

이를 수행하려면 서버에서도 일치를 실행하여 루트가 일치하는지 확인해야 합니다.물론 이 작업을 하려면 본격적인 서버 측 렌더링을 수행하는 것이 좋습니다.서버 렌더링 가이드를 참조하십시오.

언급URL : https://stackoverflow.com/questions/36052604/how-to-let-react-router-respond-with-404-status-code