I am having issues with my reactJS routes, When I click on a link, the URL changes on the address bar but it won't render the component except I reload the page. 

This is my code:

index.js

```
import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import {Switch, Route, BrowserRouter } from 'react-router-dom';
import Home from './components/Home';
import CreateProduct from './components/products/CreateProduct';

if (document.getElementById('root')) {
    ReactDOM.render(
        <BrowserRouter>
                <Switch>
                    <Route path="/home" component={Home} exact={true} />
                    <Route path="/products/add" component={CreateProduct} exact={true} />
                    <Home />
                </Switch>
        </BrowserRouter>,
        document.getElementById('root'));
}

```

Home.js

```
import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import {Link, BrowserRouter} from "react-router-dom";

export default class Home extends Component {
    render(){
        return(
            <BrowserRouter>
                <Link className="nav-link" to="/products/add">Create Product</Link>
            </BrowserRouter>
        );
    }
}

```

CreateProduct.js

```
import React, {Component} from 'react';
import {Link, BrowserRouter} from "react-router-dom";

export default class CreateProduct extends Component{

    render(){
        return(
            <BrowserRouter>
                <Link className="nav-link" to="/home"></Link>
            </BrowserRouter>
        );
    }
}

```

Please what am I missing here?