Expected behavior

To be able to render NavBar links within a react-router <Router>.

Actual behavior

Returns error You should not use <Route> or withRouter() outside a <Router>.

I'm not sure why this is occurring. As you can see in my code below, the header code, with the MDBNavbar and MDBNavbarBrand are within the <Router>. I've tried to strip my code down to the most bare elements (no Redux, no history, no components) and I'm still getting this error.

Any input or assistance would be greatly appreciated. Thank you.

Resources (screenshots, code snippets etc.)

import React from 'react'
import ReactDOM from 'react-dom'
import * as serviceWorker from './serviceWorker'

// MDB React initialization
import '@fortawesome/fontawesome-free/css/all.min.css'
import 'bootstrap-css-only/css/bootstrap.min.css'
import 'mdbreact/dist/css/mdb.css'

import {BrowserRouter as Router} from 'react-router-dom'
import {MDBNavbar, MDBNavbarBrand} from 'mdbreact'


const target = document.querySelector('#root')

const jsx = (
    <div>
    <Router>
        <header>
            <MDBNavbar expand='md' scrolling fixed='top'>
                <MDBNavbarBrand href='/'>
                    <strong >Job Hunt App</strong>
                </MDBNavbarBrand>
            </MDBNavbar>       
        </header>
    </Router>
    </div>
)

ReactDOM.render(jsx, target)