反应路由器，redux，电子：路由器没有渲染答案

【问题标题】：React router, redux, electron: router isn't rendering反应路由器，redux，电子：路由器没有渲染
【发布时间】：2023-03-06 19:55:01
【问题描述】：

我正在尝试让 react-router 在电子应用程序中工作。我正在使用boilerplate 并删除了一些我不想要的东西，但这应该可以提供正在使用的技术的非常可靠的摘要。

我无法让路由器按预期工作。对我来说，这意味着当我使用history.push('/someroute/') 或<Link to="someroute"... 时，应该渲染该路由器的相应组件，而前一个组件会消失。

这是我的路线文件：

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>
);

我希望如果单击<Link to="/browser/"> aaaa </Link>，它将转到 /browser/ 组件。相反，我得到一个错误：

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

同样，如果我在路由中将 path="/browser/" 行移到 path="/" 行上方，它总是会转到 /browser/。

编辑：RootContainer

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

编辑 2：配置商店

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;
};

【问题讨论】：

您是否将connectRouter(history)(rootReducer) 作为createStore() 的第一个参数？
你用的是哪个版本的 react-router？
我不是这样传递的，而是作为中间件传递的 github.com/chentsulin/electron-react-boilerplate/blob/master/…
我正在使用 react-router 4.1.2
我不敢相信我没有早点注意到这一点。我认为问题可能是您在单击时同时加载了和。尝试将exact 添加到您的<Route exact path="/" component={MyDevkitsPage} />

标签： javascript reactjs redux react-router electron

【解决方案1】：

您需要将<Route path="/" component={MyDevkitsPage} /> 更改为<Route exact path="/" component={MyDevkitsPage} />。

通过将exact 添加到<Route />，您将阻止react-router 尝试同时加载<MyDevkitsPage /> 和<DevkitBrowserPage />。

【讨论】：

再次感谢！一定花了 3 个小时试图弄清楚这一点。注意：出现了一个类似的解决方案，从技术上讲，我试过了。但是，启用了热重载，因此尽管它实际上可以工作，但我认为它只是加载第二条路线而不是第一条路线。如果其他人遇到问题，我建议在测试时关闭热重载以避免混淆，

【解决方案2】：

我有同样的问题。我注意到的一件事是，如果我将路由路径放在所有其他路径之后，它不会抛出异常。

我的代码：

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

【讨论】：