反应：具有 http header 状态的路由器

Question

我使用 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）页面 header？

Answer 1

你应该在你的服务器上处理这个，但如果你仍然希望能够在客户端设置 http 状态代码，有一个 npm 包可以解决这个问题。 Here

来自文档，

import React from "react";

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

反应：具有 http header 状态的路由器

React: router with http header status

http-headers

reactjs

react-router-dom