How to show error page if route is not available?

Akshay phalphale 0
Viewed 50

I have following implementation of React routing. How can I create Error page if path not found from routes list ?,


function App() {
     return (
        <div className="app-container">
            <Switch>
                {routes.map(({ key, path, crumbs, renderComponent }) => {
                    return (
                        <Route key={key} path={path}>
                            {renderComponent(crumbs)}
                        </Route>
                    )
                })}
                <Redirect to="/add-user" />
            </Switch>
        </div>
    )
}
react-router-dom react-router reactjs javascript
3 Answers

assuming its V5, It would be something as below...

Show a 404 Not found

<Route path="*">
  <FourZeroFour />
</Route>

Redirect if not found

<Route path="*">
   <Redirect to="/" />  // replace your home page path
</Route>

If you care, a good blog post on same ...

KcH0

I think, we should to check the availability of key param. If key param was not exist, let's redirect user to Custom element 404 Page not found.

function App() {
     return (
        <div className="app-container">
            <Switch>
                {routes.map(({ key, path, crumbs, renderComponent }) => {
                    return (
                        if(key){
                            <Route key={key} path={path}>
                              {renderComponent(crumbs)}
                            </Route>
                        }
                         else{
                            <CustomElement404PageNotFound />
                        }
                    )
                })}
                <Redirect to="/add-user" />
            </Switch>
        </div>
    )
}

Thank you

Taufik Romadhon0

You can do it with put Route with path "*" append to last one.

Plumpboy0
Related