如何在react js中移动第二个组件

how to move second component in react js?

本文关键字：移动 第二个 组件 js react      更新时间：2023-09-26

我正在使用react-router.js。我想使用react.js 点击按钮显示/移动到第二个组件/页面

我可以点击按钮移动到第二页/组件吗这是我的代码

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

您可以从react-router 使用Link

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

希望这能帮助

相关文章：