Question

我使用React Router 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未找到”页面，但是无法在客户端中更新标头。

要更新标头，必须将其设置为后端。例如，如果使用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

您需要将每个组件放置在“ layout”标签内。但是，如果您要放置许多路线，则最好的方法是执行以下操作：

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>

致谢。

URL与ReactJS不匹配时如何返回404状态代码

4 个答案: