0

想象一下，我的应用程序结构如下：

ReactDOM.render(
    <Provider store={store}>
        <ConnectedRouter history={history}>
            <React.StrictMode>
                <App />
            </React.StrictMode>
        </ConnectedRouter>
    </Provider>,
  document.getElementById('root')
);

我想为我的应用程序提供多语言支持，因此想从路径中获取语言并将其保存在我的redux商店中以供以后使用。

关于SO Imagine 中的这个答案，我想从路径中读取语言，所以在我的App组件中我应该有如下内容：

<Switch>
    <Route path="/:lng/" exact component={Home} />
</Switch>

这是可以接受的，但是，当我使用下面的组件时，我应该在传递给它react-router Link的 prop 中指定语言。to

<Link
    to={to}
    className={classNames(classes.link, className)}
    {...rest}
>
    {children}
</Link>

如果这些Link实例是我自己创建的，那没有问题，但是有很多使用第三方库Link创建的内部组件，他们不知道我（严格来说是我的应用程序 redux 商店）中指定的语言。HomeApp

我没有修改库的源代码的特权，即使我不想在每次调用时都传递语言Link（甚至当我history.push显式调用时），管理语言在某种程度上是一个横切关注点，我是考虑在历史记录中使用代理，以便每当调用它的方法push时，path我都可以使用. 这个想法有其局限性，我无法实现它，因为将传递给的历史代理应该在之前创建。另一方面，使用我应该有的特定语言创建代理，以便我可以从路径中检测语言。historypush/:lang/pathConnectedRouterConnectedRouterhistoryConnectedRouter

所以这里是主要问题：

如何强制拦截对likepush方法的每个调用，因为从商店中选择的位置。historyhistory.push('path')history.push('/:lang/path')langredux

4

0 回答 0