Minimal example of my react issue

Container.js

import _ from 'lodash';
// We have to remove node_modules/react to avoid having multiple copies loaded.
// eslint-disable-next-line import/no-unresolved
import React, { Component } from 'react';
import Route from 'react-router-dom/Route';
import PropTypes from 'prop-types';
import Paneset from '@folio/stripes-components/lib/Paneset';
import Pane from '@folio/stripes-components/lib/Pane';
import MultiColumnList from '@folio/stripes-components/lib/MultiColumnList';

import Details from './Details';

class Container extends Component {

  static propTypes = {
    stripes: PropTypes.shape({
      connect: PropTypes.func.isRequired,
      hasPerm: PropTypes.func.isRequired,
    }).isRequired,
    history: PropTypes.shape({
      push: PropTypes.func.isRequired,
      replace: PropTypes.func.isRequired,
    }).isRequired,
  };

  constructor(props) {
    super(props);
    this.state = {
      selectedItem: {},
    };
    this.okapi = props.okapi;
    this.connectedDetails = props.stripes.connect(Details);
    this.onChangeMode = this.onChangeMode.bind(this);
    this.onSelectRow = this.onSelectRow.bind(this);
  }

  onSelectRow = (e, meta) => {
    const uri = encodeURIComponent(meta.uri);
    this.setState({ selectedItem: meta });
    this.props.history.push(`/amsl/detail/${uri}`);
  }

  onChangeMode(e) {
    this.setState({ selectedItem: e.target.value });
  }

  render() {

    const items = [
      {uri: "uri:1"},
      {uri: "uri:2"}
    ];

    return (
      <div>
        <Paneset>
          <Pane defaultWidth="16%" paneTitle={<div style={{ textAlign: 'center' }} > <strong>Container 1</strong> </div>}>
            <h2>TestPane</h2>
          </Pane>
          <Pane defaultWidth="fill" paneTitle={<div style={{ textAlign: 'center' }} > <strong>Container 2</strong> </div>}>
            <h2>Another Pane</h2>
            <MultiColumnList
              id="list-items"
              contentData={items}
              rowMetadata={['uri']}
              selectedRow={this.state.selectedItem}
              onRowClick={this.onSelectRow}
              visibleColumns={['uri']}
            />
          </Pane>
          <Route
            path={'/amsl/detail/:uri'}
            render={() => <this.connectedDetails {...this.props} />}
          />
        </Paneset>
      </div>
    );
  }
}

export default Container;

Details.js

import _ from 'lodash';
import React, { Component } from 'react';
import Pane from '@folio/stripes-components/lib/Pane';

class Details extends Component {

  render() {
    return (
      <Pane defaultWidth="44%" paneTitle="More Details" dismissible>
        <h1>Hello, world!</h1>
      </Pane>
    );
  }
}

export default Details;

index.js

// We have to remove node_modules/react to avoid having multiple copies loaded.
// eslint-disable-next-line import/no-unresolved
import React, { Component, PropTypes } from 'react';
import Switch from 'react-router-dom/Switch';
import Route from 'react-router-dom/Route';
import Container from './Container';
import Settings from './settings';
import Details from './Details';

class MyRouting extends Component {

  static propTypes = {
    stripes: PropTypes.shape({ connect: PropTypes.func.isRequired }).isRequired,
    location: PropTypes.object.isRequired,
    match: PropTypes.object.isRequired,
    showSettings: PropTypes.bool,
  }

  constructor(props) {
    super(props);
    this.connectedContainer = props.stripes.connect(Container);
    this.connectedDetails = props.stripes.connect(Details);
  }

  NoMatch() {
    return (
      <div>
        <h2>Uh-oh!</h2>
        <p>How did you get to
          <tt>{this.props.location.pathname}</tt>?</p>
      </div>
    );
  }

  render() {
    if (this.props.showSettings) {
      return <Settings {...this.props} />;
    }

    return (
      <Switch>
        <Route
          exact
          path={`${this.props.match.path}`}
          render={() => <this.connectedContainer {...this.props} />}
        />
        {/* <Route
          exact
          path={'/amsl/detail/:uri'}
          render={() => <this.connectedDetails {...this.props} />}
        /> */}
        <Route component={() => { this.NoMatch(); }} />
      </Switch>
    );
  }
}
export default MyRouting;

package.json

{
  "name": "amsl",
  "version": "0.2.0",
  "description": "Amsl Evaluation Module",
  "repository": {
    "type": "git",
    "url": "https://github.com/rchr/ui-amsl"
    },
  "license": "Apache-2.0",
  "engines": {
    "node": ">=6.0.0"
  },
  "stripes": {
    "type": "app",
    "displayName": "Amsl",
    "route": "/amsl",
    "hasSettings": true,
    "okapiInterfaces": {
      "permissions": "4.0"
    },
    "permissionSets": [
      {
        "permissionName": "module.users.enabled",
        "displayName": "UI: Amsl module is enabled"
      }
    ]
  },
  "scripts": {
    "lint": "eslint *.js || true"
  },
  "devDependencies": {
    "babel-core": "^6.17.0",
    "babel-eslint": "^7.0.0",
    "babel-preset-es2015": "^6.18.0",
    "babel-preset-react": "^6.16.0",
    "babel-preset-stage-0": "^6.16.0",
    "babel-register": "^6.18.0",
    "eslint": "^3.8.0",
    "eslint-config-airbnb": "^13.0.0",
    "eslint-import-resolver-webpack": "0.7.1",
    "eslint-plugin-babel": "^3.3.0",
    "eslint-plugin-import": "^2.0.1",
    "eslint-plugin-jsx-a11y": "^2.2.3",
    "eslint-plugin-react": "^6.4.1",
    "webpack": "1.11.0"
  },
  "dependencies": {
    "@folio/stripes-components": "^1.4.0",
    "@folio/stripes-logger": "^0.0.2",
    "lodash": "^4.17.4",
    "isomorphic-fetch": "^2.2.1",
    "prop-types": "^15.5.10",
    "react": "^15.4.2",
    "react-bootstrap": "^0.30.7",
    "react-router-dom": "^4.0.0"
  },
  "peerDependencies": {
    "@folio/stripes-core": "^2.3.1",
    "@folio/stripes-connect": "^2.4.0"
  }
}