Как вернуть код состояния 404, если URL не совпадает с ReactJS

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

Вы должны поместить каждый компонент в тег '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>

С уважением.

Answer 2

Попробуйте это:

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

Поместите это в конец маршрута, так как это будет последний маршрут для обработки, если ничего не найдено.

Answer 3

Вы хорошо обрабатываете свою страницу 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 4

Попробуйте:

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

вместо

<Route component={Error404}/>