I am building react app.  

If a user types the wrong URL, the `NoMatch` component is shown (which is fine).  

**Challenge** is that when a user types an existing URL, two components are shown. The `NoMatch` component and the expected component both appear.  

Note: I found some questions about this on *stackoverflow*, but non of the solutions worked for me. I am using a `<PrivateRoute>` and `react-router-dom`.

App.js

```js
<Provider store={store}>
    <Router>
        <Switch>
            <Route exact path="/login" component={Login}/>
            <Fragment>
                <Navigationbar/>
                <div className="main-part">
                    <Sidebar/>
                    <main className="content shrunk-sidebar">
                        <PrivateRoute path="/" exact component={Home}/>
                        <PrivateRoute path="/files" exact component={Files}/>
                        <PrivateRoute path="/new_app" exact component={NewApp}/>
                        <PrivateRoute path="/applications/:app_name" exact component={Application} />
                        <PrivateRoute path="*" component={NoMatch}/>
                    </main>
                </div>
            </Fragment>
        </Switch>
    </Router>
</Provider>

```

PrivateRoute.js

```js
const PrivateRoute = ({component: Component, auth, ...rest}) => (
    <Route
        {...rest}
        render={props =>
            auth.isAuthenticated ? (
                <Component {...props} />
            ) : (
                <Redirect
                    to={{
                        pathname: "/login",
                        state: {from: props.location}
                    }}
                />
            )
        }
    />
);

```

**That is the problem that I have.**
[![enter image description here](https://i.stack.imgur.com/bIxZv.jpg)](https://i.stack.imgur.com/bIxZv.jpg)

Any idea what I am doing wrong that I do not get the result that I want?