React-Router v4. How to append a parameter to URL? TypeError: history.push is not a function

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

好吧，我想到了这个解决方案。也许对某些人会有帮助。如果有更多更好的实现方式，请post您的回答。

但还有一个问题。一旦我进入 www.website.com/xx/someURL 并按语言切换，URL 的 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>
      )
    }

  }
};

Answer 2

您的导航组件需要使用 react-router 中的 Link 或 NavLink 组件。您无需从 context.

手动访问 router

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;

  }
};

React-Router v4. How to append a parameter to URL? TypeError: history.push is not a function

React-Router v4. How to append a parameter to URL? TypeError: history.push is not a function

reactjs

react-router

react-router-v4

react-router-dom