CODEWITHSUNDEEP
javascriptreactjs
user5711656
user5711656

Reputation: 3678

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

Upvotes: 0

Views: 787

Answers (1)

anoop
anoop

Reputation: 3297

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

Upvotes: 1

Related Questions