Question

我使用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（）函数来完成，或者此事件应该是全局的？语言从几个组件切换。

React-Router V4.2.0

Answer 1

您的导航组件需要使用Link中的NavLink或react-router组件。您无需从router手动访问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;

  }
};

Answer 2

好吧，我来到这个解决方案。也许这会对某些人有所帮助。如果有更好的方法来实现它，请发表您的答案。

但还有一个问题。进入www.website.com/xx/someURL并按语言切换后，网址的xx部分应与新参数交换，但应保留someURL。谁知道怎么做？

<强> index.js：

import { Router, Route, Switch } from 'react-router-dom';
import createBrowserHistory from 'history/createBrowserHistory';
const customHistory = createBrowserHistory();

  render() {       
    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>
    )
  }

导航组件：

import PropTypes from "prop-types";

class NavLink extends React.Component {
  static contextTypes = {
    router: PropTypes.object
  }
  constructor(props, context) {
     super(props, context);
  }


  handleClick(path) {    
    this.context.router.history.push(path);
  }

  render() {    
    const { i18n } = this.props;
    const toggle = lng => i18n.changeLanguage(lng);    

    if (this.props.event) {

      return (        
        <li><a href="javascript:void(0)" onClick={()=>{ toggle(this.props.event); this.handleClick(this.props.event); }}><span className={(this.props.spanClassName)}></span></a></li>
      )
    }

  }
};

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

2 个答案: