user5711656 user5711656 - 6 months ago 56
Javascript Question

how to move second component in react js?

I am using react-router.js .I want to show / move to second component / page on click of button using react.js

can I move to second page / component on button click
here is my code

http://codepen.io/naveennsit/pen/RamvLj?editors=1010

var { Router, Route} = ReactRouter
class App extends React.Component {

render() {
return (<Router>
<Route path='/' component={first}></Route>
<Route path='/about' component={second}></Route>
</Router>)
}

}

class second extends React.Component {

render() {
return <label>second component</label>
}

}
class first extends React.Component {
handleClick(){
alert('--')
}
render() {
return <div>
<label>first component</label>
<button onClick={this.handleClick}>MOve to second page</button>
</div>
}

}

React.render( < App / > , document.getElementById('app'))

Answer

You can use Link from react-router

var { Router, Route, Link} = ReactRouter
class App extends React.Component {
  render() {
    return (<Router>
      <Route path='/' component={first} />
      <Route path='/about' component={second} /> 
    </Router>)
  }
}

class second extends React.Component {
  render() {
    return <label>second component</label>
  }
}
class first extends React.Component {
  render() {
    return <div>
      <label>first component</label>
      <Link to='/about'><button>MOve to second page</button></Link>
      {this.props.children}
    </div>
  }  
}
React.render( < App / > , document.getElementById('app'))

Hope this helps

Comments