Tengo algunos componentes en la aplicación de reacción que moví a un paquete lerna separado (aparte de App.js y Routes.js) y causó que mi navegación junto con el historial dejaran de funcionar). ¿Alguna sugerencia sobre cómo arreglar esta separación que funciona para navegar a una URL diferente?

Aquí están los archivos en esos paquetes separados:

Historia.js:

 import { createBrowserHistory } from 'history'; export default createBrowserHistory();

Navegación.js

 import history from '../utils/History'; export default function Nav(loc, state) { history.push(loc, state); }

función en la clase que quiero que funcione con 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;) }

Y aquí está Rutas de otro paquete (simplificado)

 import { MyComponent } from '@MyComponents'; import { Switch, Route, Redirect } from 'react-router-dom'; const Routes = () => ( <Switch> <Route exact path='/' render={props => ( <MyComponent {...props} />bla...bla..))

Obtengo mi URL en el navegador http://localhost:3000/main/componentname Pero no redirige a la URL, solo si actualizo

¿Alguna sugerencia sobre cómo puedo hacer que la Navegación funcione si Rutas está en un componente y Navegación + Historial en otro? Las funciones de devolución de llamada son un poco difíciles de implementar si la aplicación se vuelve demasiado complicada. ¿Hay alguna otra forma de arreglarlo?