Rect-Router v4. URL에 매개 변수를 추가하는 방법은 무엇입니까? TypeError : history.push가 함수가 아닙니다.

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; 

    } 
}; 

Answer 2

잘, 나는이 해결책에왔다. 아마 그것은 어떤 사람들에게는 도움이 될 것입니다. 더 좋은 방법이 있다면 답을 게시하십시오.

하지만 한 가지 문제가 남았습니다. 일단 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> 
    ) 
    } 

    } 
};