반응 js에서 두 번째 구성 요소를 이동하는 방법은 무엇입니까?

user5711656

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

당신은 사용할 수 있습니다 Link에서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'))

도움이 되었기를 바랍니다

이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.

침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제

에서 수정
0

몇 마디 만하겠습니다

0리뷰
로그인참여 후 검토

관련 기사

분류에서Dev

apigee에서 ExtractVariables 정책을 사용하여 응답으로 반환 된 xml 항목 목록의 두 번째 요소를 읽는 방법은 무엇입니까?

분류에서Dev

Delphi / FMX : 위에서 두 번째 대신 이전에 추가 된 모든 상단 정렬 구성 요소 아래에 동적으로 생성 된 상단 정렬 구성 요소를 추가하는 방법은 무엇입니까?

분류에서Dev

두 번째 구성 요소의 특정 행이 시작될 때까지 UIPickerView의 첫 번째 구성 요소에 데이터를 표시하지 않는 방법은 무엇입니까?

분류에서Dev

구조체 배열의 두 번째 요소에 쓰는 방법은 무엇입니까? C에서

분류에서Dev

UIPickerview에서 첫 번째 구성 요소 선택을 기반으로 두 번째 구성 요소의 데이터를 설정하는 방법

분류에서Dev

이 구성 요소가 반응에서 두 번 렌더링되는 이유는 무엇입니까?

분류에서Dev

XPATH에서 동일한 속성 ID를 가진 두 번째 요소를 선택하는 방법은 무엇입니까?

분류에서Dev

이 반응 구성 요소에서 '평가'를 피하는 방법은 무엇입니까?

분류에서Dev

구조체 배열의 두 번째 요소에 액세스하는 방법은 무엇입니까?

분류에서Dev

각도 프로젝트에서 반응 구성 요소를 구현하는 방법은 무엇입니까?

분류에서Dev

반응에서 두 구성 요소를 병합하는 방법

분류에서Dev

반응 js 구성 요소에 if-else를 추가하는 방법은 무엇입니까?

분류에서Dev

반응하면서 두 섹션 사이에 요소를 배치하는 방법은 무엇입니까?

분류에서Dev

API에서 가져온 반응 구성 요소를 사용하는 방법은 무엇입니까?

분류에서Dev

API에서 가져온 반응 구성 요소를 사용하는 방법은 무엇입니까?

분류에서Dev

반응 구성 요소 내에서 window.onerror를 사용하는 방법은 무엇입니까?

분류에서Dev

반응에서 API 호출로 구성 요소를 테스트하는 방법은 무엇입니까?

분류에서Dev

입력 필드가 하위 구성 요소에있을 때 반응 구성 요소에서 useForm 데이터를 얻는 방법은 무엇입니까?

분류에서Dev

Ajax 응답에서 첫 번째 요소 속성 값을 얻는 방법은 무엇입니까?

분류에서Dev

파이썬의 튜플에서 두 번째 요소를 얻는 방법은 무엇입니까?

분류에서Dev

JavaScript에서 두 번째 JSON 요소를 표시하는 방법은 무엇입니까?

분류에서Dev

경로에서 두 번째 요소를 추출하는 방법은 무엇입니까?

분류에서Dev

두 번째 생성자 내에서 생성자를 호출하는 방법은 무엇입니까?

분류에서Dev

ember.js-다른 경로에서 두 구성 요소를 연결하는 방법은 무엇입니까?

분류에서Dev

SpriteKit 게임에서 두 번째 터치를 비활성화하는 방법은 무엇입니까?

분류에서Dev

목록에서 두 번째 마지막 요소를 찾는 방법은 무엇입니까?

분류에서Dev

반응-사용자 정의 구성 요소에 DOMAttribute를 추가하는 방법은 무엇입니까?

분류에서Dev

DOM 요소 다음에 두 번째 div를 선택하는 방법은 무엇입니까?

분류에서Dev

반응 구성 요소 : 소품에서 키 전용 속성을 설정하는 방법은 무엇입니까?

Related 관련 기사

  1. 1

    apigee에서 ExtractVariables 정책을 사용하여 응답으로 반환 된 xml 항목 목록의 두 번째 요소를 읽는 방법은 무엇입니까?

  2. 2

    Delphi / FMX : 위에서 두 번째 대신 이전에 추가 된 모든 상단 정렬 구성 요소 아래에 동적으로 생성 된 상단 정렬 구성 요소를 추가하는 방법은 무엇입니까?

  3. 3

    두 번째 구성 요소의 특정 행이 시작될 때까지 UIPickerView의 첫 번째 구성 요소에 데이터를 표시하지 않는 방법은 무엇입니까?

  4. 4

    구조체 배열의 두 번째 요소에 쓰는 방법은 무엇입니까? C에서

  5. 5

    UIPickerview에서 첫 번째 구성 요소 선택을 기반으로 두 번째 구성 요소의 데이터를 설정하는 방법

  6. 6

    이 구성 요소가 반응에서 두 번 렌더링되는 이유는 무엇입니까?

  7. 7

    XPATH에서 동일한 속성 ID를 가진 두 번째 요소를 선택하는 방법은 무엇입니까?

  8. 8

    이 반응 구성 요소에서 '평가'를 피하는 방법은 무엇입니까?

  9. 9

    구조체 배열의 두 번째 요소에 액세스하는 방법은 무엇입니까?

  10. 10

    각도 프로젝트에서 반응 구성 요소를 구현하는 방법은 무엇입니까?

  11. 11

    반응에서 두 구성 요소를 병합하는 방법

  12. 12

    반응 js 구성 요소에 if-else를 추가하는 방법은 무엇입니까?

  13. 13

    반응하면서 두 섹션 사이에 요소를 배치하는 방법은 무엇입니까?

  14. 14

    API에서 가져온 반응 구성 요소를 사용하는 방법은 무엇입니까?

  15. 15

    API에서 가져온 반응 구성 요소를 사용하는 방법은 무엇입니까?

  16. 16

    반응 구성 요소 내에서 window.onerror를 사용하는 방법은 무엇입니까?

  17. 17

    반응에서 API 호출로 구성 요소를 테스트하는 방법은 무엇입니까?

  18. 18

    입력 필드가 하위 구성 요소에있을 때 반응 구성 요소에서 useForm 데이터를 얻는 방법은 무엇입니까?

  19. 19

    Ajax 응답에서 첫 번째 요소 속성 값을 얻는 방법은 무엇입니까?

  20. 20

    파이썬의 튜플에서 두 번째 요소를 얻는 방법은 무엇입니까?

  21. 21

    JavaScript에서 두 번째 JSON 요소를 표시하는 방법은 무엇입니까?

  22. 22

    경로에서 두 번째 요소를 추출하는 방법은 무엇입니까?

  23. 23

    두 번째 생성자 내에서 생성자를 호출하는 방법은 무엇입니까?

  24. 24

    ember.js-다른 경로에서 두 구성 요소를 연결하는 방법은 무엇입니까?

  25. 25

    SpriteKit 게임에서 두 번째 터치를 비활성화하는 방법은 무엇입니까?

  26. 26

    목록에서 두 번째 마지막 요소를 찾는 방법은 무엇입니까?

  27. 27

    반응-사용자 정의 구성 요소에 DOMAttribute를 추가하는 방법은 무엇입니까?

  28. 28

    DOM 요소 다음에 두 번째 div를 선택하는 방법은 무엇입니까?

  29. 29

    반응 구성 요소 : 소품에서 키 전용 속성을 설정하는 방법은 무엇입니까?

뜨겁다태그

보관