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.

Answer 1

You need to do this...

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

Answer 2

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>