Reactjs 如何使用react router 4导航嵌套组件

我有一个带有按钮、公共背景和公共标题以及更改嵌套组件的屏幕。在这个屏幕中，我想通过单击按钮来更改嵌套组件。嵌套组件必须在带有左右按钮的圆圈中相互更改。到目前为止，我做了很多尝试来实现这一点（我试着用路由器来实现），我只给出了我的一次尝试的代码，但都没有成功。我没有收到任何错误，我看到浏览器中的布线正在更改，但屏幕没有，我只看到第一个嵌套组件。SOF上对此有疑问，但它们与旧版本的react路由器有关。 这里是我的代码，如果您需要更多信息，请随时在评论中询问

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

import React，{Component}来自'React'；
导入{Link，
BrowserRouter作为路由器，
路线,，
转换
来自“react router dom”的withRouter}；
从“./info/Info1”导入Info1；
从“./info/Info2”导入Info2；
从“./info/Info3”导入Info3；
从“/info/Info4”导入Info4；
类信息扩展组件{
建造师（道具）{
超级（道具）；
这个.currentIndex=1；
}
componentDidMount（）{
}
leftHandler（）{
log（“左键单击”）；
var temp=此.currentIndex；
此。更改屏幕（--temp）；
}
rightHandler（）{
console.log（“右键单击”）；
var temp=此.currentIndex；
此.changeScreen（++temp）；
}
更改屏幕（索引）{
常数numberOfScreens=4；
如果（指数<1）
this.currentIndex=屏幕数；
否则如果（索引>屏幕数）
这个.currentIndex=1；
其他的
this.currentIndex=索引；
this.props.history.push（“/info/”+this.currentIndex）；
}
render（）{
返回(
назад
);
}
}
Info.propTypes={
历史记录：React.PropTypes.shape({
推送：需要React.PropTypes.func，
}).要求，
位置：React.PropTypes.object.isRequired，
};
使用路由器导出默认值（信息）；

如果使用路由器将组件包装在

中，则只能在
中使用，就像
等

要使示例正常工作，您需要将
设置为
的子级，因为它使用
和路由器。首先，从
render
方法中删除
，只需将
渲染为顶级组件：

render（）{
返回(
назад
)
}

然后，无论在何处渲染
，请改为渲染
。或者，添加一个额外的组件来渲染这两个组件，并使用该组件而不是

//选项1：在使用时渲染
从“/Info”导入信息；
...
ReactDOM.render（）；
//选项2：添加另一个封装在路由器中的组件，
//作为模块的新导出，或作为新模块
常量应用=（）=>(
);
导出默认应用程序；
在没有代码的情况下，我没有得到您的建议，我尝试用信息组件包装我的路线，但这些尝试都没有成功。不管怎样，我和Match得到了有效的解决方案
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);