reagieren Route Problem Komponente

Question

Das ist mein app.js

import React from 'react' 
import { render } from 'react-dom' 
import { Router, Route, IndexRoute, browserHistory } from 'react-router' 

const App = ({ children }) => (
    <div> 
    {children} 
    </div> 
) 

import Index from './index' 
import Eng from './wEng' 
import Ar from './wAr' 

render((
    <Router history={browserHistory}> 
    <Route path="/simply" component={App}> 
     <IndexRoute component={Index}/> 
     <Route path="/A" component={Ar}/> 
     <Route path="/e" component={Eng}/> 
    </Route> 
    </Router> 
), document.getElementById('app')) 

Und das ist mein index.js

import React from 'react'; 
import ReactDOM from 'react-dom'; 
import $ from "min-jquery"; 
import axios from "axios"; 
import { render } from 'react-dom' 
import WEng from './wEng' 
import WAr from './wAr' 
import {Link} from 'react-router'; 


const urlP=`http://localhost:3000/blah`; 

export default class App extends React.Component { 
constructor(props){ 
    super(props); 
    this.state={ 
     imagedayA:[], 
     imagenightA:[] 
     }; 
    } 
    componentDidMount() { 
    axios.get(urlP) 
      .then(function (response) { 
       console.log(response.data,"this is response") 
       this.setState({ 
       imagedayA:response.data.today.iconday, 
       imagenightA:response.data.today.iconnight 
       }) 
      }.bind(this)) 
      .catch(function (response) { 
       console.log(response); 
      }); 
     } 
    render(){ 
    if(this.state.component) { 
     return this.state.component; 
    } 

    return (
     <div> 
      <span><button className=" button1" onClick={() => this.setState({component: <WAr {...this.state} />})}>Ar</button></span> 
      <span><button className=" button2" onClick={() => this.setState({component: <WEng {...this.state} />})}>Eng</button></span> 
     </div> 
    ); 
    }; 
} 

Das ist Krieg Komponente:

import React from 'react' 
import WEng from './wEng' 
import Index from './index' 

export default class App extends React.Component { 
    render() { 
    return <div> 
    <div className="mainAr">   
      <img className="today_imgAr" src={this.props.imagedayA}/> 
      <p className="tempdayAar">{this.props.tempdayA}<span className="degree">&deg;</span></p> 
    </div>  

    </div> 
    } 
} 

Ich möchte hinzufügen eine taste auf die wAr-komponente also wenn ich klicke es nehmen sie mich von wAr-komponente, die ich in WEng komponente wie das mit react tun.

Answer 1

Sie müssen den Einsatz von Link von react-router

import React from 'react'; 
import {Link} from 'react-router'; 
import WEng from './wEng' 
import Index from './index' 

export default class App extends React.Component { 
    render() { 
    return <div> 
    <div className="mainAr">   
      <img className="today_imgAr" src={this.props.imagedayA}/> 
      <p className="tempdayAar">{this.props.tempdayA}<span className="degree">&deg;</span></p> 
    </div>  
    <button><Link to="/e">Navigate To E</Link></button> 
    </div> 
    } 
} 

machen