React-Router v4。如何将参数附加到URL?TypeError:history.push不是函数

库兹马

我正在使用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

天堂

您的导航组件需要使用中的LinkNavLink组件react-router您无需手动访问routerfrom 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] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章