javascript - react 路由器，redux， Electron : router isn't rendering

Question

我正在尝试让 react-router 在 electron 应用程序中工作。我正在使用 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;
};

Answer 1

您需要更改 <Route path="/" component={MyDevkitsPage} />至 <Route exact path="/" component={MyDevkitsPage} /> .

通过添加 exact那个<Route />你会阻止react-router从试图同时加载 <MyDevkitsPage />和 <DevkitBrowserPage />同时。