Question: I am a beginner in reactJS. I have the following routes defined in App.js

```
<Router>
      <Switch>
        <Route exact path='/' component={Login} />
        <Route path='/dashboard' component={Dashboard} />
        <Route path="*" component={NotFound} ></Route>
      </Switch>
</Router>

```

The `NotFound` component should be displayed for any invalid route. It works perfectly for all invalid route that looks like this

* localhost:3000/something\_invalid
* localhost:3000/something\_invalid\_1

but if I add one more step to the URL. The NotFound component is not getting rendered. e.g.,

* localhost:3000/something\_invalid/something\_invalid
* localhost:3000/something\_invalid\_1/something\_invalid\_1

What could I be doing wrong ?

Answer: 
```
<Router>
  <Switch>
    <Route exact path='/' component={Login} />
    <Route path='/dashboard' component={Dashboard} />
    <Route component={NotFound} ></Route>
  </Switch>
</Router>

```

Code updated.

A 'Switch' renders the first child 'Route' that matches. A 'Route' without a path always matches.

The asterisk in your example is used in React-Router until version 3.
If you use the root URL, it'll work as a catch all

Note that this works because it comes after your other defined routes, ie. `/dashboard` still works

```js
<Router>
      <Switch>
        <Route exact path='/' component={Login} />
        <Route path='/dashboard' component={Dashboard} />
        <Route path="/" component={NotFound} ></Route>
      </Switch>
</Router>

```