React router, redux, electron: router isn't rendering

Question

I'm trying to get react-router to work in an electron app. I'm using a boilerplate and stripped away some of the stuff I don't want but that should provide a pretty solid summary of the technologies being used.

I cannot for the life of my get the router to work as expected. To me this means that when I use history.push('/someroute/') or <Link to="someroute"..., the corresponding component to that router should be rendered and the previous one gone.

Here is my routes file:

export default () => (
  <App>
    <Switch>
      <Route path="/" component={MyDevkitsPage} />
      <Route path="/browser/" component={DevkitBrowserPage} />
      <Route path="/Console/" component={ConsolePage} />
      <Route path="/Controller/:devkitIp" component={ControllerPage} />
      <Route path="/Setting/:devkitIp" component={SettingPage} />
    </Switch>
  </App>
);

I would expect that if <Link to="/browser/"> aaaa </Link> is clicked, it would go to the /browser/ component. Instead, I get an error:

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

Likewise, if I move the path="/browser/" line above the path="/" line in routes, it will always go to /browser/.

edit: RootContainer

export default function Root({ store, history }: RootType) {
  return (
    <Provider store={store}>
      <ConnectedRouter history={history}>
        <Routes />
      </ConnectedRouter>
    </Provider>
  );
}

Edit 2: Configure store

const configureStore = (initialState?: counterStateType) => {
  // Redux Configuration
  const middleware = [];
  const enhancers = [];

  // Thunk Middleware
  middleware.push(thunk);

  // Logging Middleware
  const logger = createLogger({
    level: 'info',
    collapsed: true
  });
  middleware.push(logger);

  // Router Middleware
  const router = routerMiddleware(history);
  middleware.push(router);

  // Redux DevTools Configuration
  const actionCreators = {
    ...counterActions,
    ...routerActions,
  };
  // If Redux DevTools Extension is installed use it, otherwise use Redux compose
  /* eslint-disable no-underscore-dangle */
  const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__
    ? window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__({
      // Options: http://zalmoxisus.github.io/redux-devtools-extension/API/Arguments.html
      actionCreators,
    })
    : compose;
  /* eslint-enable no-underscore-dangle */

  // Apply Middleware & Compose Enhancers
  enhancers.push(applyMiddleware(...middleware));
  const enhancer = composeEnhancers(...enhancers);

  // Create Store
  const store = createStore(rootReducer, initialState, enhancer);

  if (module.hot) {
    module.hot.accept('../reducers', () =>
      store.replaceReducer(require('../reducers')) // eslint-disable-line global-require
    );
  }

  return store;
};

Answer 1

You will need to change <Route path="/" component={MyDevkitsPage} /> to <Route exact path="/" component={MyDevkitsPage} />.

By adding exact to that <Route /> you will prevent react-router from trying to load both <MyDevkitsPage /> and <DevkitBrowserPage /> at the same time.