我正在使用i18-next
库在应用程序中切换语言。这样就完成了,而无需重新加载页面。语言切换通过以下方式完成:
render() {
const toggle = lng => i18n.changeLanguage(lng);
return (
<a href="javascript:void(0)" onClick={()=>{ toggle();}}></a>
)
我会提供这样的功能:切换语言后,将语言参数添加到URL。因此,一旦发生更改,它应该看起来像:www.website.com/xx
我已经阅读了有关Rect-Router v4和历史记录的所有主题,但是所有建议在我的项目中均无效。其中一些与过时的功能有关。我也用withRouter尝试了一些示例,但是没有任何效果...
以我的情况该如何实现?
index.js:
import { Router, Route, Switch } from 'react-router-dom';
import createBrowserHistory from 'history/createBrowserHistory';
const customHistory = createBrowserHistory();
...
return (
<I18nextProvider i18n={i18n}>
<div>
<Router history={customHistory}>
<Switch>
<Route exact path="/:lng?" component={Page} />
<Route path={`/:lng?/someURL`} component={Page}/>
...
<Route component={NoMatch} />
</Switch>
</Router>
<ModalContainer />
</div>
</I18nextProvider>
)
导航组件:
handleClick() {
**append URL with lang param**
console.log(history);
-> history: History { length: 1, scrollRestoration: "auto", state: null }
history.push('/redirected');
-> TypeError: history.push is not a function
}
render() {
const toggle = lng => i18n.changeLanguage(lng);
return (
<a href="javascript:void(0)" onClick={()=>{ toggle(this.props.event); this.handleClick(); }}></a>
)
应该使用handleClick()函数完成此事件,还是应将此事件设置为全局事件?语言从几个组成部分切换。
反应路由器V4.2.0
您的导航组件需要使用中的Link
或NavLink
组件react-router
。您无需手动访问router
from context
。
import {NavLink} from 'react-router-dom';
class NavComponent extends React.Component {
render() {
const { i18n } = this.props;
const toggle = lng => i18n.changeLanguage(lng);
if (this.props.event) {
return (
<li><NavLink className={(this.props.spanClassName)} onClick={()=> toggle(this.props.event)} to={this.props.event}/></li>
);
}
else
return null;
}
};
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句