반응 라우터 돔 내역

Question

일부 기능이 발생한 후에 반응하는 앱을 탐색하려고합니다. 일반적으로 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을 사용해야하는 경우 알려주세요. 푸시를 사용

Answer 1

시도 :

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

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