3

我将 connected-react-router 与我的 react redux 应用程序一起使用。我需要服务器端渲染和客户端渲染（我通过limenius react bundle 在symfony twig 模板中使用react 组件）。

我的问题是我无法正确使用 basename。我的 URL 中有一个区域设置 isocode (www.localhost.com/fr/mypage)

如果我在历史记录中声明一个基本名称“/fr/”：

<Route exact path={`/${isocode}/checkout/customize`} component={Customize} />

有效！

...但我想要这个：

<Route exact path="checkout/customize" component={Customize} />

它不起作用！

我的 app.js 中有什么：

export const App = () => {
  const store = ReactOnRails.getStore('CustomizeStore');
  const state = store.getState();
  const { isocode } = state.general.data.locale;
  const history = createHistory({
    basename: `/${isocode}/`,
    initialEntries: [state.router.location.pathname],
  });

  return (
    <Provider store={store}>
      <ConnectedRouter history={history}>
        <Switch>
          <Route exact path={`/${isocode}/checkout/customize`} component={Customize} />
        </Switch>
      </ConnectedRouter>
    </Provider>
  );
};

在我的 store.js 中

export const createHistory = historyConfig =>
  isServer ? createMemoryHistory(historyConfig) : createBrowserHistory();

export default (props, context) => {
  const { baseURL } = props.general.data.api;
  const { isocode } = props.general.data.locale;
  const history = createHistory({ basename: `/${isocode}/`, initialEntries: [context.pathname] });

  return createStore(
    reducers(history),
    { ...props },
    composeEnhancers(
      applyMiddleware(thunk, routerMiddleware(history)),
    ),
  );
};

我对 app.js 的期望：

<Provider store={store}>
  <ConnectedRouter history={history}>
    <Switch>
      <Route exact path="checkout/customize" component={Customize} />
    </Switch>
  </ConnectedRouter>
</Provider>

我读过 react-router 提供的“browserRouter”和“staticRouter”的基本名称应该在 ConnectRouter 组件的历史道具中声明。

我做错了什么？connect-react-router 是我的 redux ssr 应用程序的好选择还是我应该使用 react-router ？（我正在使用 immutable.js，如果可能的话，我想实现热重载 =）

非常感谢！

4

1 回答 1

1

几天前我遇到了同样的问题，我通过在 中设置来解决它basename，createBrowserHistory如下所示：

const history = createBrowserHistory({ basename: “/baseName” })
于 2021-02-27T23:36:35.490 回答