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)

我尝试将browserHistory与react-router一起使用，但是BrowserRouter默认情况下不会将历史记录作为道具。

如果我必须使用window.location，请告诉我。

Answer 1

尝试使用push：

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

有关详细信息，请参阅this。

反应路由器Dom历史

1 个答案: