如何導航與反應路由器嵌套組件4

Question

我有一個按鈕，共同的背景和共同的標題和更改嵌套組件的屏幕。在這個屏幕裏面，我想通過點擊一個按鈕來改變嵌套組件。嵌套組件必須用左右按鈕在圓圈中互換。到目前爲止，我做了很多嘗試來實現這個目標（我試圖用路由器來做），我只給你一個代碼，但是他們都沒有工作。我沒有得到任何錯誤，我看到瀏覽器中的路由正在改變，但屏幕沒有，我只看到第一個嵌套組件。在SOF上有這方面的問題，但它們與舊版本的react-router有關。 在這裏我的代碼，如果你需要更多的信息隨時問在評論。

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

編輯： 雖然我接受給定的回答，我沒有測試它，在我的項目我用這個解決方案：

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>內使用它，就像<Route> s等

爲了得到你的例子工作，你需要使<Info><Router>的孩子，因爲它使用withRouter。首先，請從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>代替。或者，添加一個呈現這兩者的額外組件，並使用該組件代替<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;