react-router link for route from another component

Question

I have a React Component called ContentBar that holds a Route to display dynamic content:

//ContentBar.js
var React = require('react')
import ContentBarRoute from '../../../../routes/contentbar.routes'

const ContentBar = () =>
(
    <ContentBarRoute />
)
export default ContentBar

I've placed this ContentBar in my root App structure:

//App.js
<div className="logBar">
    <ErrorBoundary>
        <Responsive minWidth={960}>
            <ContentBar />
        </Responsive>
    </ErrorBoundary>
</div>

And I've created a route for a new menu in the ContentBarRoute component which I'm loading in the ContentBar:

//ContactBarRoute.react.js
const ContentBarRoute = () => (
    <main>
      <Switch>
        <Route exact path="/logbar"component={LogBar}/>
        <Route path="/user/:number/settings" />
        <Route path="/user/:number/profile" />
        <Route path="/user/add" component={UserAddMenu} />
      </Switch>
    </main>
)

When I try to link to /user/add from another component though, I'm not able to update the route from another component:

//Contactlist.react.js
<div className="contact-list useradd">  
    <Button as={Link} to="/user/add" className="btn-useradd">
       <FontAwesome className="icon-adduser" tag="i" name="plus" />
   </Button>
</div>

Can someone help me see what I'm doing wrong here? There's not a lot of information about routing between components, I found one answer in my research but it was slightly different: React-Router-4 routing from another component

The problem is that my routes and links are in separate areas of the hierarchy, whereas that guy's components were all close together.

Update: The other example doesn't talk about rendering new components in place of old ones where one component is totally separate from the other:

Here is my router definition it exists in the class that sends the App to the html div:

import React from 'react'

import { render } from 'react-dom'
import { Provider } from 'react-redux'
//import { createStore } from 'redux'
import { HashRouter } from 'react-router-dom'
import configureStore from '../tools/store.enhancer';
import App from '../javascripts/entry';
//import rootReducer from '../app/reducers/index'

//let store = createStore(rootReducer)
const store = configureStore();

render((
  <Provider store={store}>
    <HashRouter>
      <App />
    </HashRouter>
  </Provider>
), document.getElementById('root'));

The behavior I expect is that the existing component is switched out for the user-add component, but the actual behavior is that nothing happens when I click the button, and I get an error saying

Hash history cannot PUSH the same path; a new entry will not be added to the history stack