语言环境作为 URL 参数与 ReactRouter v4 和 redux

Question

我正在使用 React 和 Redux 构建一个多语言应用程序：

{
    "react": "16.2.0",
    "redux": "3.7.2",
    "react-redux": "^5.0.6",
    "react-router-redux": "^5.0.0-alpha.9",
    "react-router": "^4.2.0",
    "react-redux-i18n": "^1.9.1"
}

已解决（使用 path-to-regexp）：https://codesandbox.io/s/307nz4p9nm

编辑：终于可以渲染组件了。最后一个麻烦是路径生成，对于我的语言选择器。

我正在使用 <ConnectedRouter /> 依赖于 createBrowserHistory()。

我有以下结构：

// containers/App.jsx
<div>
    <ul>
        <li>
            <NavLink to={`${match.url}/`}>Home</NavLink>
        </li>
        <li>
            <NavLink to={`${match.url}/ABC`}>ABC</NavLink>
        </li>
        <li>
            <NavLink to={`${match.url}/DEF`}>DEF</NavLink>
        </li>
        <li>
            <NavLink to={`${match.url}/GHI`}>GHI</NavLink>
        </li>
        <li>
            <NavLink to={`${match.url}/JKL`}>JKL</NavLink>
        </li>
    </ul>
    <div>
        <Router />
    </div>
    <footer>
        <Link to={ (???) }>English</Link>
        <Link to={ (???) }>French</Link>
    </footer>
</div>

// containers/Router.jsx
<Switch>
    <Route exact path={`{match.url}/`} component={Home} />
    <Route exact path={`{match.url}/abc`} component={AbcComponent} />
    <Route exact path={`{match.url}/def`} component={DefComponent} />
    <Route exact path={`{match.url}/ghi`} component={GhiComponent} />
    <Route exact path={`{match.url}/jkl`} component={JklComponent} />
</Switch>

// containers/RootContainer.jsx
<Provider store={store}>
    <ConnectedRouter history={history}>
        <Switch>
            <Route path='/:locale(en|fr)' component={App} />
            <Redirect to='/en' />
        </Switch>
    </ConnectedRouter>
</Provider>

以这种方式呈现：

const store = createStore(combineReducers({}))
const history = createBrowserHistory()

ReactDOM.render(
    <RootContainer store={store} history={history} />,
    document.getElementById('app-container')
)

这导致以下 URI：

/
    /(en|fr)
        /abc
        /def
        /ghi
        /jkl

现在，我正在寻找一种方法来实现我的语言环境选择器：生成当前页面的路径，只需更新 :locale 参数。

无论我当前访问的路线是什么 (/en, /en/abc), match.path 总是 return /:locale(en|fr) 而且我从不访问子-来自我的 App 组件的路径（例如 /abc）。

那么如何挂钩 react-redux-i18n 以自动从 URL 中获取区域设置而不是在它自己的状态下管理它？

Answer 1

<Switch> 仅适用于 Route 和 Redirect 作为直接后代。所以 LocalizedRoute 组件不起作用。

<ConnectedRouter basename=/:locale/ history={history} />

我不知道 basename prop 和不必要的 imo，删除它。

你可以做的是使用动态路由：

<Route path="/:locale/<path>"/>

并减少 LOCATION_CHANGE 操作中的语言环境参数。但是还有很多解决方案，例如：

<Switch>
   <Route path="/en" component={SwitchMyRoutes} /> // No exact!!
   <Route path="/fr" render={(match,location)=> <SwitchMyRoutes locale="fr" match={match}/>} />
   <Route render={({location})=> <Redirect to={`/en/${location}`}/>}/>
</Switch>

语言环境作为 URL 参数与 ReactRouter v4 和 redux

locale as URL parameter with ReactRouter v4 and redux

internationalization

redux

react-router-redux

react-router-v4

react-redux-i18n