Question

我在我的React Redux应用程序中使用了连接反应路由器。我需要服务器端渲染和客户端渲染（我正在通过limenius react bundle在symfony树枝模板中使用react组件。）

我的问题是我无法正确使用基本名称。我的网址（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>

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

我做错了什么？对于我的redux ssr应用程序来说，connect-react-router是一个不错的选择吗？还是应该使用react-router？（我使用的是immutable.js，如果可能的话，我想实现热重载）

非常感谢！

Answer 1

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

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

基本名称不起作用connected-react-router

1 个答案: