当 ReactJS 中的 URL 不匹配时如何返回 404 状态码

Posted 2023-02-24

【中文标题】当 ReactJS 中的 URL 不匹配时如何返回 404 状态码

【英文标题】：How to return 404 status code when URL does not match at ReactJS

【发布时间】：2019-03-07 21:40:44

【问题描述】：

我使用反应路由器 v4。所以我试图在标题处返回（如果可能的话）状态代码 404 我的代码在这里

export default class App extends Component 
  displayName = App.name

render() 
    return (
        <Layout>
            <Switch>
                <Route exact path='/' component=Home />
                <Route path='/sitemap/:S' component=SiteMap />
                <Route path='/videos' component=Videos />
                <Route path='/contact' component=Contact />
                <Route path='/privacy' component=Privacy />
                /*<Route path='/errorpage' component=Error404 status=404 />*/
                <Route component=Error404/>
            </Switch>
      </Layout>
    );
  

【问题讨论】：

如果路径与上述路径都不匹配，将呈现组件 Error404。所以我想你是对的。

这是正确的代码和解决方案。

@vitomadio 我知道我试图在页面上也有状态代码，遗憾的是这只能发生在后端。

可能是***.com/questions/42929472/…的副本

提出的问题是返回404状态码，不渲染404页面。

【参考方案1】：

您处理好您的 404 Not Found 页面，但无法在客户端更新标头。

要更新标头，您必须将其设置到后端。例如，如果您使用 Express，则可以在代码的最后一级编写

app.use((error, req, res, next) => 
    res.status(404).render('index');
    //OR
    res.status(404).sendFile('path/to/index.html') // Where index.html is your entry point
);

【讨论】：

这是有道理的。我希望通过路由器找到解决方案而不是使用服务器:(

哦对不起！！！只能写入发送到服务器/从服务器发送的标头，而不是更新客户端中的标头。

【参考方案2】：

试试：

<Route path="/" component=Error404/>

而不是

<Route component=Error404/>

【讨论】：

看看：***.com/questions/13846738/… 解释前端无法处理状态码

【参考方案3】：

试试这个：

<Route render=() => <h1>404 not found</h1>/>

将此放在路由的末尾，因为如果没有找到，这将是最后处理的路由。

【参考方案4】：

您需要将每个组件放在“布局”标签中。但是，如果您有很多路线要放置，那么最好的方法是这样做：

import * as React from 'react';
import  Route, Redirect, withRouter  from 'react-router-dom';

import SessionManager from '../../../session/session-manager';

class AppRoute extends React.Component<any> 

    /**
     * Constructor
     * 
     * @param * props
     * @memberof AppRoute
     */
    constructor(props: any) 
        super(props);
    

    /**
     * Component will mount callback
     *
     * @memberof AppRoute
     */
    public componentWillMount(): void 
        SessionManager.getInstance().loadSession();
    

    /**
     * Render
     *
     * @returns JSX.Element
     * @memberof AppRoute
     */
    public render(): JSX.Element 
        const  private: isPrivate, layout: Layout, component: Component, ...rest  = this.props;

        if (isPrivate === true) 
            return (
                <Route
                    ...rest
                    render=props => SessionManager.getInstance().isValidSession() ? (<Layout><Component ...props /></Layout>) : (<Redirect to= pathname: '/login', state:  from: this.props.location   />)
                />
            )
         else 
            return (
                <Route ...rest render=props => (
                    <Layout>
                        <Component ...props />
                    </Layout>
                ) />
            )
        
    


export default withRouter(AppRoute);

就我而言，我借此机会添加了路由保护。

最后：

<Switch>
    <Route exact=true path="/login" component=LoginModule />
    <AppRoute exact=true path="/" layout=MainLayout private=true component=DashboardModule />
    <AppRoute exact=true path="/dashboard" layout=MainLayout private=true component=DashboardModule />
    <AppRoute exact=true path="/players" layout=MainLayout private=true component=PlayersModule />
    <Route component=NotFound />
</Switch>

问候。

【讨论】：

这与问题无关，大约是 404 个状态码，这仅显示了一个包罗万象的路线的一些复杂示例

@MichaelB。他的问题在我公开的第二个代码中得到了解决。没有什么复杂的，除非它对你来说很复杂。

@Samuel 第二部分的问题在哪里解决？我看不到任何返回 404 的路线。

@Ricardo

@Samuel 我知道你提到的那一行。只说没有返回404，这是主要问题。你写的一切都没有回答。