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

Question

我使用反应路由器 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>
    );
  }
}

Answer 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
});

Answer 2

试试：

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

而不是

<Route component={Error404}/>

Answer 3

试试这个：

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

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

Answer 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>

问候。