ReactJS Routing

Question

I have implemented routing in my React app and I wanted to redirect non-existent routes to errorpage.

Route:

    <Route path="/errorpage" component={ErrorPage} />
    {/*<Route path="/:parentId/:childId" component={ErrorPage} />*/}
    <Redirect to="/errorpage" />

Working: When I try to access domain/notapath --> Redirect to proper error page with css

Not Working [Issue] When I try nested routes like domain/123/123 --> Only ErrorPage content is displayed without css.

I also tried :

                    <Route path="/*" component={ErrorPage} />

So is there any other way to overcome this for routing to errorpage for nested paths as well which doesn't exists.?

And why this above config didn't work. Any suggestion. Thanks.

What version are you using for routing? – Alpha Jul 11 '23 at 05:41 — Alpha, Jul 11 '23 at 05:41
"react-router": "^6.8.2", "react-router-dom": "^5.3.4" – Sunil Raj Aug 10 '23 at 09:04 — Sunil Raj, Aug 10 '23 at 09:04

score 0 · Answer 1 · answered Jul 08 '23 at 07:32

0

You need to do this...

<Route path="*" element={<ErrorPage />} />

answered Jul 08 '23 at 07:32

Kannu Mandora

479
2
10

I got it. But the concern it. When I do domain/path --> Redirect to error page and rendered properly. Now when i do domain/path1/subpath1 --> Redirects find to error page , but css is missing. – Sunil Raj Jul 10 '23 at 07:51

score 0 · Answer 2 · answered Jul 08 '23 at 10:35

0

You have to enclose the component as below

<Route path="/errorpage" component={ <ErrorPage/> } />

Syntax for any routing as follows

<Router>
  <Route path="/pathname" element={ <Component/> }>
</Router>

answered Jul 08 '23 at 10:35

Jagadeesh T

1
1
6

1

I guess. I have no issue with the existing syntax for other routing. Routing and redirection happens. But only for nester routes, redirection to error page works but css is missing. – Sunil Raj Jul 10 '23 at 07:53

ReactJS Routing

2 Answers2