I have some components in react App that I moved to a separate lerna package (apart from App.js and Routes.js) and it caused that my Navigation together with History stopped working). Any suggestion how to fix this separation that it work to Navigate to different URL?

Here are the files in that separate packages:

History.js:

 import { createBrowserHistory } from 'history';

 export default createBrowserHistory(); 

Navigation.js

 import history from '../utils/History';

  export default function Nav(loc, state) {
  history.push(loc, state);
  }

function in the class that I want t work with Nav import Nav from '../Navigation';

     class MyComponent extends Component {
     constructor(props) {
     super(props);
     this.handleClick = this.handleClick.bind(this);
     }

    handleClick(c) {  
    Nav('/main/' + c.name;)
    }

And here is Routes from another package(simplified)

  import { MyComponent } from '@MyComponents';
  import { Switch, Route, Redirect } from 'react-router-dom';

  const Routes = () => (
  <Switch>
  <Route
  exact
  path='/'
  render={props => (
      <MyComponent
        {...props}      
      />bla...bla..))

I get my URL in the browser http://localhost:3000/main/componentname But it doesn't redirect to the URL, only if I refresh

Any suggestions how I can make Navigation work if Routes is in one component and Navigation + History in another? Callback functions a bit difficult to implement if the Application becomes too complicated. Is there any other ways to fix it?