Rect-Router v4. Wie fügt man einen Parameter an die URL an? TypeError: history.push ist keine Funktion

Question

Ich verwende i18-next Bibliothek, um Sprachen in meiner App zu wechseln. So ist es getan, ohne eine Seite neu zu laden. Die Sprachumschaltung erfolgt über:

render() { 

    const toggle = lng => i18n.changeLanguage(lng); 
    return ( 
     <a href="javascript:void(0)" onClick={()=>{ toggle();}}></a> 
    ) 

Ich würde solche Funktionalität machen: Sobald die Sprache gewechselt wird, fügen Sie zu einer URL einen Sprachparameter hinzu. Also, sobald Änderung ist aufgetreten sollte es aussehen: www.website.com/xx Ich habe vor allem alle Themen in Bezug auf Rect-Router v4 und Geschichte gelesen, aber alle Vorschläge funktionierte nicht in meinem Projekt. Einige von ihnen beziehen sich auf veraltete Funktionen. Ich habe auch einige Beispiele mit withRouter versucht, aber nichts hat funktioniert ...

Wie könnte es in meinem Fall erreicht werden?

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> 
    ) 

Navigationskomponente:

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> 
    ) 

Sollte es mit der Funktion als handle() oder dieses Ereignis sollte global geschehen sein? Die Sprachen werden von mehreren Komponenten umgeschaltet.

React-Router V4.2.0

Answer 1

Ihre Navigationskomponente eine Link oder NavLink Komponente von react-router verwenden muss. Sie müssen nicht manuell auf router von context zugreifen.

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

gut, kam ich zu dieser Lösung. Vielleicht wird es für einige Leute hilfreich sein. Wenn es bessere Wege gibt, um es zu erreichen, bitte posten Sie Ihre Antwort.

Aber ein Problem übrig. Sobald ich in www.website.com/xx/someURL bin und Sprachschalter drücke, sollte der xx Teil der URL mit dem neuen Parameter getauscht werden, aber someURL sollte bleiben. Jeder weiß, wie man es schafft?

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> 
    ) 
    } 

nav Komponente:

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> 
    ) 
    } 

    } 
};