反応ルータでネストされたコンポーネントをナビゲートする方法4

Question

私はボタン、共通の背景と共通のタイトルとネストされたコンポーネントを変更する画面を持っています。この画面の中で、ボタンをクリックするだけで入れ子になったコンポーネントを変更したいと思っています。ネストされたコンポーネントは、左右のボタンを使用して円で相互に変更する必要があります。これまで、私はこれを達成するための試みをたくさん行っていました（私はwithRouterでそれをやろうとしました）、私は自分の試みのコードしか与えませんでしたが、それらのすべてがうまくいきませんでした。私は何のエラーも出ません。ブラウザのルートは変化していますが、画面は変化しません。最初のネストされたコンポーネントだけが表示されます。 SOFに関するこれに関する質問がありますが、古いバージョンの反応ルータに関連しています。 ここに私のコードは、あなたがより多くの情報を必要とする場合は、コメントでお気軽にお問い合わせください。

import React, { Component } from 'react'; 

import { Link, 
     BrowserRouter as Router, 
     Route, 
     Switch, 
     withRouter } from 'react-router-dom'; 

import Info1 from './info/info1'; 
import Info2 from './info/info2'; 
import Info3 from './info/info3'; 
import Info4 from './info/info4'; 


class Info extends Component { 

    constructor(props) { 
    super(props); 

    this.currentIndex = 1; 

    } 




    componentDidMount() { 


    } 

    leftHandler() { 
    console.log("left click"); 
    var temp = this.currentIndex; 
    this.changeScreen(--temp); 
    } 

    rightHandler() { 
    console.log("right click"); 
    var temp = this.currentIndex; 
    this.changeScreen(++temp); 
    } 

    changeScreen(index) { 

    const numberOfScreens = 4; 

    if(index < 1) 
     this.currentIndex = numberOfScreens; 
    else if(index > numberOfScreens) 
     this.currentIndex = 1; 
    else 
     this.currentIndex = index; 
    this.props.history.push("/info/" + this.currentIndex); 
    } 






    render() { 


    return (
     <Router> 
     <div className="info-common"> 
      <img className="game-title info-game"/> 
      <Switch> 
       <Route path="/info/1" component={ Info1 }/> 
       <Route path="/info/2" component={ Info2 }/> 
       <Route path="/info/3" component={ Info3 }/> 
       <Route path="/info/4" component={ Info4 }/> 
      </Switch> 
      <Link to="/rings"><button className="back-info-btn">назад</button></Link> 
      <button onClick={ this.leftHandler.bind(this) } className="left-info-btn"></button> 
      <button onClick={ this.rightHandler.bind(this)} className="right-info-btn"></button> 
     </div> 
     </Router> 
    ); 
    } 

} 


Info.propTypes = { 
    history: React.PropTypes.shape({ 
    push: React.PropTypes.func.isRequired, 
    }).isRequired, 
    location: React.PropTypes.isRequired, 
}; 

export default withRouter(Info); 

EDIT： 私は与えられた答えを受け入れたが、私はそれをテストしていない、私のプロジェクトで、私はこのソリューションを使用：情報自体に続いて

app.js 

import { 
    BrowserRouter as Router, 
    Route, 
    Link 
} from 'react-router-dom'; 

... 


render() { 

    return (
     <div id='game-container' width="1236" height="634"> 
     <Router> 
     <div> 
      <Route path="/info" component={ Info }/> 
     </div> 
     </Router> 
     </div> 
    ); 
    } 

を：

Info.js 

class Info extends Component { 

    constructor(props) { 
    super(props); 

    this.currentIndex = 1; 

    } 





    leftHandler() { 
    console.log("left click"); 
    var temp = this.currentIndex; 
    this.changeScreen(--temp); 
    } 

    rightHandler() { 
    console.log("right click"); 
    var temp = this.currentIndex; 
    this.changeScreen(++temp); 
    } 

    changeScreen(index) { 

    const numberOfScreens = 4; 

    if(index < 1) 
     this.currentIndex = numberOfScreens; 
    else if(index > numberOfScreens) 
     this.currentIndex = 1; 
    else 
     this.currentIndex = index; 
    this.props.history.push("/info/" + this.currentIndex); 
    } 


    render() { 


    return (
     <div className="info-common"> 
      <img className="game-title info-game" src={ this.drawGame() }/> 
      <Switch> 
       <Route path={`${this.props.match.path}/1`} component={ Info1 }/> 
       <Route path={`${this.props.match.path}/2`} component={ Info2 }/> 
       <Route path={`${this.props.match.path}/3`} component={ Info3 }/> 
       <Route path={`${this.props.match.path}/4`} component={ Info4 }/> 
      </Switch> 
      <Link to="/rings"><button className="back-info-btn">назад</button></Link> 
      <button onClick={ this.leftHandler.bind(this) } className="left-info-btn"></button> 
      <button onClick={ this.rightHandler.bind(this)} className="right-info-btn"></button> 
     </div> 
    ); 
    } 

} 

Info.propTypes = { 
    history: React.PropTypes.shape({ 
    push: React.PropTypes.func.isRequired, 
    }).isRequired, 
    location: React.PropTypes.object.isRequired, 
}; 

export default withRouter(Info); 

Answer 1

withRouterにコンポーネントをラップする場合は、のように<Router>の内部でのみ使用できますなど

を使用しているので、<Info>の子を<Router>にする必要があります。まず、render方法から<Router>を削除して、ちょうどトップレベルのコンポーネントとして<div>をレンダリング：

render() { 
    return (
    <div className="info-common"> 
     <img className="game-title info-game"/> 
     <Switch> 
     <Route path="/info/1" component={ Info1 }/> 
     <Route path="/info/2" component={ Info2 }/> 
     <Route path="/info/3" component={ Info3 }/> 
     <Route path="/info/4" component={ Info4 }/> 
     </Switch> 
     <Link to="/rings"> 
     <button className="back-info-btn">назад</button> 
     </Link> 
     <button onClick={ this.leftHandler.bind(this) } className="left-info-btn"></button> 
     <button onClick={ this.rightHandler.bind(this)} className="right-info-btn"></button> 
    </div> 
) 
} 

その後、あなたは<Info />をレンダリングどこでも、代わりに<Router><Info /></Router>をレンダリングします。または、2つをレンダリングする余分なコンポーネントを追加し、<Info />の代わりにそのコンポーネントを使用します。

// Option 1: render <Router> wherever you use <Info> 
import Info from './info'; 
... 
ReactDOM.render(<Router><Info /></Router>); 

// Option 2: add another component that wraps <Info> in a Router, 
// either as the new export of the module, or as a new module 
const App =() => (
    <Router> 
    <Info /> 
    </Router> 
); 
export default App;