Question

所以我有一个使用Redux的React应用程序，我需要在它上面设置I18n。我决定使用react-redux-i18n软件包（不确定这是最好的主意，但雅虎的react-intl甚至react-intl-redux等替代方案似乎太复杂了）。最初的设置很顺利，但现在我陷入了障碍。

我想将语言环境作为请求网址的一部分传递。例如。 /en/用于根路径，/en/forums用于论坛等。这意味着对于每条路径我都需要3条路径：

/en/:path表示英语（默认）语言环境
/ru/:path为俄罗斯人
/:path成为默认语言区域的<Redirect>

为每条路径写3条路线似乎太脏了，所以我决定为它制作一个可重复使用的组件：

import React from 'react';
import { Redirect } from 'react-router-dom';
import LayoutRoute from './LayoutRoute';
import appConfig from './config/appConfig';

class I18nRoute extends React.Component {
    render() {
        const { path, ...rest } = this.props;
        return (
            <div>
                <Redirect from={path} to={`/${appConfig.DEFAULT_LOCALE}${path}`}/>
                <LayoutRoute exact path={`/en?${path}`} lang='en' {...rest} />
                <LayoutRoute exact path={`/ru?${path}`} lang='ru' {...rest} />
            </div>
        )
    }
};

export default I18nRoute;

然后尝试在我的路由器设置中使用它

<Switch>
                <I18nRoute exact path="/" layout={MainLayout} component={Home} />
                <I18nRoute exact path="/forums" layout={MainLayout} component={ForumsRoot} />
                <I18nRoute exact path="/forums/:id" layout={MainLayout} component={Forum} />
                <I18nRoute exact path="/topics/:id" layout={MainLayout} component={Topic} />
                <I18nRoute exact path="/users/:id" layout={MainLayout} component={UsersPage} />
</Switch>

这有两种方式适得其反：

它无法识别已定位的路径，即使/en/导致找不到路线。
它不会与params重定向，例如/forums/18已修补/en/forums/:id。

是否有一些解决方法或我需要走一条完全不同的路线？（双关语）

UPD 仔细写下来之后我意识到重定向规则可以简化为正则表达式（如果路由不匹配/^/（en | ru）/（。*）$ /然后重定向到/en/:path）。

使用React Router V4的Multilang路由并重定向

0 个答案: