javascript - 基本名称无法连接 react 路由器

Question

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

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

如果我在历史中声明一个基名'/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，如果可能我想实现热重载 =)

非常感谢!

Answer 1

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

const history = createBrowserHistory({ basename: “/baseName” })