[SOLVED] Unexpected browserHistory behaviour (Meteor + React + React Router)


#1

Hello,

(PS: I’m using Meteor + React + React Router. The application structure is not traditional, I’m making a package-esq application, an example is https://github.com/TelescopeJS/Telescope. I’m trying to do dynamic routing with react router and things are not working out well.)

There be something wrong with browserHistory. Navigation refreshes the page. Going back and forth through the browser buttons refreshes the page.

Example of this, with all codes, are here - https://github.com/dbx834/sandbox

React-Router specific codes follow,

In a core package, with a global export, allow registeration of routes and components

...
// ------------------------------------- Components -------------------------------- //

Sandbox.components = {};

Sandbox.registerComponent = (name, component) => {
  Sandbox.components[name] = component;
};

Sandbox.getComponent = (name) => {
  return Sandbox.components[name];
};

// ------------------------------------- Routes -------------------------------- //

Sandbox.routes = {};
Sandbox.routes.routes = [];

Sandbox.routes = {
  routes: [],
  add(routeOrRouteArray) {
    const addedRoutes = Array.isArray(routeOrRouteArray) ? routeOrRouteArray : [routeOrRouteArray];
    this.routes = this.routes.concat(addedRoutes);
  },
};
...

In various implementations (domain specific logic, UI, etc), register components and routes

...
import TodoApp from './components/TodoApp.jsx';

Sandbox.registerComponent('TodoApp', TodoApp);

Sandbox.routes.add([
  { name: 'todoAppRoute', path: 'todo-app', component: Sandbox.components.TodoApp },
]);
...

In the main app

import React from 'react';
import { render } from 'react-dom';
import { Meteor } from 'meteor/meteor';
import { Router, browserHistory } from 'react-router';

import App from './components/App.jsx';
import Homepage from './components/Homepage.jsx';

Sandbox.registerComponent('App', App);
Sandbox.registerComponent('Homepage', Homepage);

Meteor.startup(() => {

  const AppRoutes = {
    path: '/',
    component: Sandbox.components.App,
    indexRoute: { name: 'home', component: Sandbox.components.Homepage },
    childRoutes: Sandbox.routes.routes,
  };

  console.log(AppRoutes);

  render(
    <Router routes={AppRoutes} history={browserHistory} />,
    document.getElementById('app-root')
  );
});

What is wrong?


#2

Hello again,

I uninstalled all npm packages, meteor packages, updated everything, re-installed latest packages, cleaned out all previous builds and everything works now!

There was something weird somewhere.

Best