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.

Answer 2

I had the same issue. One thing that I notice is that if I place the route path after all the others, it will not throw the exception.

My Code:

export default () => (
 <App>
  <Switch>
    <Route path="/counter" component={CounterPage} />
    <Route path="/calculator" component={Calculator} />
    <Route path="/" component={HomePage} />
  </Switch>
 </App>
);

Answer 3

This code worked for me I've changed BrowseRouter to MemoryRouter

import React from 'react'
import { MemoryRouter as Router, Routes, Route } from 'react-router-dom';
import './App.css';

import routes from './Route';

    function App() {
      return (
        <>
          <Router>
            <Routes>
              {routes.map((route) => {
                return <Route path={route.path} element={route.element} />
              })}
            </Routes>
          </Router>
        </>
      );
    }
export default App;