How to return 404 status code when URL does not match at ReactJS

Question

I use react router v4. So i am trying to return (IF it is possible) a status code 404 at the headers my code is here

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

Component Error404 will be rendered if path doesn't match with none of above paths. So I guess you're right. — vitomadio, Oct 02 '18 at 18:06
@vitomadio I know i was trying to have also the status code on page sadly this can only happen on backend. — vkampouris, Oct 02 '18 at 20:57
Possibly a duplicate of https://stackoverflow.com/questions/42929472/react-router-v4-default-pagenot-found-page — Max, Oct 02 '18 at 20:57
it's layout problem. I have the same issue, no got solution for now. If you remove layout tag, it will work — SamYan, Nov 21 '18 at 22:18
The problem proposed is to return the 404 status code, not rendering the 404 page. — MiguelSlv, Apr 10 '19 at 22:49

score 3 · Answer 1 · answered Oct 02 '18 at 19:41

3

You handle well your 404 Not Found page but it is not possible to update headers in your client side.

To update headers you have to set it to your backend. If you use Express for example, you can write at the last level of your code

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

answered Oct 02 '18 at 19:41

mcssym

956
5
8

Tha makes sense. I was hoping to find an solution to do it through Router and not use the server :( – vkampouris Oct 02 '18 at 20:54
Oh sorry!!! It is only possible to write headers sent to/from your server not update headers in your client. – mcssym Oct 02 '18 at 20:57

score -1 · Answer 2 · answered Oct 02 '18 at 17:58

-1

Try:

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

instead of

<Route component={Error404}/>

answered Oct 02 '18 at 17:58

Shivam Gupta

1,198
9
10

Have a look at: https://stackoverflow.com/questions/13846738/are-301-redirects-possible-using-javascript-or-jquery explaining that status codes cannot be handled by the frontend – zyrup Nov 07 '19 at 12:12

score -2 · Answer 3 · answered Oct 02 '18 at 17:59

-2

Try this :

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

Put this at the end of routes as this will be last route to handle if nothing is found.

answered Oct 02 '18 at 17:59

Anil Kumar

2,223
2
17
22

SamYan · Answer 4 · 2018-11-22T01:39:10.937

You need to put each component within 'layout' tag. But if you have many routes to put, then the best way is do something like this:

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

In my case, I took the opportunity to add route protection.

Finally:

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

Regards.

this has nothing to do with the question, which was about 404 status codes, this only shows some complex example for a catch-all route — Michael B., Jan 24 '20 at 21:55
@MichaelB. His problem is solved in the second code that I have exposed. There is nothing complex, unless it is complex for you. — SamYan, Jan 27 '20 at 11:23
@Samuel where is the problem solved in the second part? I can’t see any route returning a 404. — Ricardo, Apr 23 '20 at 10:59
@Samuel I know the line you referred to. Only said that there is no returning 404, which is the main question. Everything you wrote doesn’t answer it. — Ricardo, Apr 23 '20 at 22:34
@Ricardo You are right. but look the coment date. 22/11/2018. Try to find mistakes in more recent questions / answers my friend. Good luck. — SamYan, Apr 24 '20 at 10:03

How to return 404 status code when URL does not match at ReactJS

4 Answers4