reactjs - react 路由器 v4。如何将参数附加到 URL？ TypeError : history. 推送不是函数

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

您的导航组件需要使用 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;

  }
};