时间戳

首页 > 解决方案 > React：具有 http 标头状态的路由器

reactjs - React：具有 http 标头状态的路由器

问题描述

我使用 react-router-dom 创建了我的 react 应用程序（客户端渲染）作为单页应用程序。使用以下方法捕获 404 页面非常简单：

import {Router} from 'react-router-dom';
import {Switch, Route, Redirect} from 'react-router-dom';
...

const Main = () => {
    return (
        <Router history={history}>
            <Switch>
                <Route exact path="/" component={Home}/>
                ...
                <Route path="*" status={404} component={PageNotFound}/>
            </Switch>
        </Router>
    )
};

export default Main;

这行得通。但是在渲染 PageNotFound 组件时，http header 状态仍然是 200，而不是预期的 404 。

使用客户端渲染时，有没有办法设置 404（或 301）页眉？

标签： reactjshttp-headersreact-router-dom

解决方案

您应该在服务器上处理此问题，但如果您仍希望能够在客户端设置 http 状态代码，则可以使用 npm 包。这里

从文档中，

import React from "react";

import StatusCode from "konnektid-react-status";
// render your component
const MyComponent = () => (
  <StatusCode code={404}>
    Sorry, page was not found
  </StatusCode>
)

推荐阅读