반응 라우터를 사용하여 URL에서 상태 속성 설정

Question

상태 속성에 따라 열고 닫는 모달이있는 컨테이너 구성 요소가 있습니다.

나는 즉, 내가 갖고 싶어, URL을 통해이를 제어 할

/projects - the modal is NOT open 
/projects/add - the modal IS open 

뿐만 아니라 여기에 직접 연결 할 수있는, 내가 주 내에서 링크를 클릭하면 URL이 변경하려면 컨테이너가 모달을 엽니 다.

누군가 내가 이것을 어떻게 할 수 있는지 또는 좋은 지침서의 올바른 방향으로 나를 가리킬 수 있습니까?

Answer 1

참고 :이 방법은 완벽하지 않습니다. 심지어 패턴보다는 오히려 반 패턴입니다. 내가 여기에 게시하는 이유는 나에게 잘 작동하고 모달을 추가 할 수있는 방식이 좋아서 (어떤 페이지에도 모달을 추가 할 수 있으며 일반적으로 그 구성 요소는 어떤 방식 으로든 다른 앱에 의존하지 않는다. 못생긴 대신 URL이 있습니다. ?modal=login-form). 그러나 모든 것이 작동하는 것을 발견하기 전에 문제를 해결할 준비를하십시오. 두 번 생각! 그것은 당신이하지에 Login을 원하는

이상

/users/login이 <Users /> 구성 요소 및 <Login /> 모달을 보여

• /users이 <Users /> 구성 요소를 보여 :

  의 당신이 URL의 다음 원하는 생각해 보자에 달려있다. 어쨌든, 고통없이 다른 페이지에 로그인 모달 추가하기.

  다른 구성 요소 위에있는 루트 구성 요소가 있다고 가정 해 보겠습니다.

  render() { 
      return (
      <Layout> 
       <UsersList /> 
      </Layout> 
  ); 
  } 
  

  을 그리고 Layout의 render은 다음과 같이 보일 수 있습니다 : 예를 들어 Usersrender는 다음과 같이 보일 수 있습니다

  render() { 
      return (
      <div className="page-wrapper"> 
       <Header /> 
       <Content> 
       {this.props.children} 
       </Content> 
       <Footer /> 
      </div> 
  ); 
  } 
  

  비결은 <Layout />에 우리가 필요할 때마다 모달의 주입을 강제하는 것입니다.

  가장 간단한 방법은 플럭스를 사용하는 것입니다. 나는 redux를 사용하고 있고 그러한 페이지 메타 정보에 대해 ui 감속기를 가지고 있습니다. 다른 플럭스 구현을 사용하는 경우 ui 저장소를 만들 수 있습니다. 어쨌든 <Layout />의 상태 (또는 더 나은 소품)에 모달 이름을 나타내는 일부 문자열과 동일한 modal이 포함 된 경우 마지막 목표는 모달 렌더링입니다.같은 뭔가 : 모달 구성 요소가 지정된 키에 따라

  render() { 
      return (
      <div className="page-wrapper"> 
       <Header /> 
       <Content> 
       {this.props.children} 
       </Content> 
       {this.props.modal ? 
       <Modal key={this.props.modal} /> : 
       null 
       } 
       <Footer /> 
      </div> 
  ); 
  } 
  

  <Modal /> 반환 (우리 login-form 키의 경우, 우리는 <Login /> 구성 요소를 수신 할).

  좋아, 라우터로 가자. 다음 코드 스 니펫을 고려하십시오.

  modal() 함수가 리턴 ui 저장소에 변화를 유발 요소를 반응 -

  const modal = (key) => { 
      return class extends React.Component { 
  
      static displayName = "ModalWrapper"; 
  
      componentWillMount() { 
       // this is redux code that adds modal to ui store. Replace it with your's flux 
       store.dispatch(uiActions.setModal(key)); 
      } 
  
      componentWillUnmount() { 
       store.dispatch(uiActions.unsetModal()); 
      } 
  
      render() { 
       return (
       <div className="Next">{this.props.children}</div> 
      ); 
      } 
  
      } 
  }; 
  
  ... 
  <Route path="users" component={Next}> 
      <IndexRoute component={Users}> 
      <Route path="login" component={modal('login-form')}> 
      <IndexRoute component={Users} /> 
      </Route> 
  </Route> 
  

  (나는 단순 여기에 추가 그냥 this.props.children를 렌더링 상상해보십시오. 대한 Next 상관 없어). 따라서 라우터가 /users/login을 얻는 즉시 ui 스토어에 스토어에 <Layout />을 추가하고 prop (또는 state)로 가져오고 지정된 키 모달에 해당하는 렌더링을 <Modal /> 렌더링합니다.

Answer 2

프로그래밍 방식으로 새 URL을 평가하려면 router to your component을 전달하고 push을 사용하십시오. 예를 들어 push은 콜백 트리거에서 사용자 작업에 의해 호출됩니다.

라우터를 설정할 때 경로를 /projects/:status으로 설정하십시오. 그런 다음 구성 경로에서 this.props.param.status을 사용하여 status의 값을 읽을 수 있습니다. 예를 들어 반응 라우터에서 "whats-it-look-lik"을 읽으십시오.