2017-12-04 13 views
0

일부 기능이 발생한 후에 반응하는 앱을 탐색하려고합니다. 일반적으로 window.location을 사용하여이 작업을 수행하지만, 광산과 같은 단일 페이지 응용 프로그램에서 페이지 새로 고침을 피하도록 지시 받았습니다. 나는 그것을 떠나기 위해 고투하고있다.반응 라우터 돔 내역

react-router-dom 및 react-dnd을 사용하고 있습니다. 반응이 없기 때문에 역사는 평범한 방식대로 전달되지 않습니다.

import React, { Component } from 'react' 
import PropTypes from 'prop-types' 
import { DragSource } from 'react-dnd' 
import ItemTypes from '../ItemTypes' 
import { BrowserRouter } from 'react-router-dom' 
const style = { 
    fontSize: '126px', 
    'cursor': 'move', 
} 

const boxSource = { 
    beginDrag(props) { 
     return { 
      name: props.name, 
     } 
    }, 

    endDrag(props, monitor) { 
     // const item = monitor.getItem() 
     const dropResult = monitor.getDropResult() 

     if (dropResult) { 
      // window.location.href = 'http://localhost/book/' 
      // what do i put here to navigate away 
     } 
    }, 
} 


class Key extends Component { 
    static propTypes = { 
     connectDragSource: PropTypes.func.isRequired, 
     isDragging: PropTypes.bool.isRequired, 
     name: PropTypes.string.isRequired, 
    } 

    render() { 
     const { isDragging, connectDragSource } = this.props 
     const { name } = this.props 
     const opacity = isDragging ? 0.4 : 1 

     return connectDragSource(<div style={{ ...style, opacity }}>{name}</div>) 
    } 
} 

// @DragSource(ItemTypes.BOX, boxSource, (connect, monitor) => ({ 
// connectDragSource: connect.dragSource(), 
// isDragging: monitor.isDragging(), 
// })) 

export default DragSource(ItemTypes.BOX, boxSource, (connect , monitor) => { 
    return { 
     connectDragSource: connect.dragSource(), 
     isDragging: monitor.isDragging(), 
    } 
})(Key) 

react-router와 함께 browserHistory를 사용하려고했지만 BrowserRouter는 기본적으로 소품을 사용하지 않습니다.

window.location을 사용해야하는 경우 알려주세요. 푸시를 사용

답변

0

시도 :

if (dropResult) { 
    history.push('/book') 
} 

더 자세히 위해 this를 참조하십시오.

+0

네 말이 맞아, 정상적으로 작동 할거야. 그러나 나는 또한 [react-dnd] (https://react-dnd.github.io/react-dnd/)를 사용하기 때문에 역사가 같은 방식으로 전달되지는 않습니다. – Kelrynn

+0

여기에서 매개 변수로 기록을 전달할 수 있습니까? endDrag (props, monitor) – SeanPlusPlus

+1

[이 답변] (https://stackoverflow.com/a/42121109/7491889)이 동일한 문제를 해결하는 것으로 보입니다. 개인적으로 가능한 경우 withRouter HOC를 권하고 싶습니다. –