How to properly setup the root router using the React Router V4

Question

I have question regarding to proper setup of routing, When i include the root header of the page the 404 not matches shows like this, The problem is, how not to include the navigation bar if the url not matches.?

GOAL: If the url not match the no match text will show only on the nomatches component.

I have here the Routing.js

export default class Routings extends Component {
render() {
    return (
        <div>
            <Router>
                <Root>
                    <Switch>                         
                        <Route path="/login" exact component={Login}/>
                        <Route path="/Index" exact component={Index}/>
                        <Route exact path="/" component={Index}/>
                        <Route component={NoMatch}/>            
                    </Switch>            
                </Root>
            </Router>
        </div>       
    )
}

}

No Matches Component.

    import React, {Component} from 'react';

class NoMatch extends Component {

    render() {
        return (
            <div>
                <h2>No Match</h2>
            </div>
        )
    }

}

export default NoMatch;

Root Component

    import React, {Component} from 'react';
import { BrowserRouter as Router, Route, Link } from "react-router-dom";
import Footer from './Includes/Footer'

class Root extends Component {

    render() {
        return (
            <div>
                <nav className="navbar navbar-expand-lg navbar-dark bg-dark fixed-top">
                    <div className="container-fluid">
                        <a className="navbar-brand" href="#">
                            <img src={require('./Assets/logo.png')} alt="" style={{height:70,width:90}}/>
                        </a>
                        <button className="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
                            <span className="navbar-toggler-icon"></span>
                        </button>
                        <div className="collapse navbar-collapse" id="navbarSupportedContent" >
                            <ul className="navbar-nav mr-auto" >

                            </ul>
                            <ul className="navbar-nav" style={{fontSize:16}}>
                                <li className="nav-item active">
                                    <Link to="/Index" className="nav-link" style={{fontWeight:'bold',color:'white'}}>Home</Link>
                                </li>
                                <li className="nav-item">

                                    <a className="nav-link" href="#" >About Us</a>
                                </li>
                                <li className="nav-item">
                                    <a className="nav-link" href="#" >Store Directory</a>
                                </li>

                                <li className="nav-item">
                                    <a className="nav-link" href="#" tabIndex="-1" aria-disabled="true" >Contact Us</a>
                                </li>
                                <li className="nav-item">
                                    <Link to="/Login" className="nav-link btn btn-danger" style={{fontWeight:'bold',color:'white',fontSize:16,border:0 +'important'}}>Login</Link>
                                </li>
                            </ul>
                        </div>
                    </div>
                </nav>

                {this.props.children}

                <Footer/>
            </div>
        )
    }

}

export default Root;