反应路线问题组件答案

【问题标题】：react route issue component反应路线问题组件
【发布时间】：2017-02-05 12:10:51
【问题描述】：

这是我的 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'))

这是我的 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>
    );
  };
}

这是战争组件：

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>
  }
}

我想向 wAr 组件添加一个按钮，所以当我单击它时，我会从我所在的 wAr 组件转到 WEng 组件，如何使用 react 来做到这一点。

【问题讨论】：

标签： javascript reactjs react-native react-router

【解决方案1】：

你需要从react-router使用Link

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>
  }
}

【讨论】：