反應路線問題組件

Question

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

這是wAr組件：

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做到這一點。

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