相关疑难解决方法(0)

我的React应用程序中有一个页面,如果表单很脏,我想阻止用户离开.

在我的react-routes中,我正在使用onLeave prop这样:

<Route path="dependent" component={DependentDetails} onLeave={checkForm}/>

而我的onLeave是:

const checkForm = (nextState, replace, cb) => {
  if (form.IsDirty) {
    console.log('Leaving so soon?');
    // I would like to stay on the same page somehow...
  }
};

有没有办法防止新路由被触发并使用户保持在同一页面上？

由于react-router-domuseHistory不再受支持，我正在寻找一个等效的使用history.location.pathname

我目前正面临一个奇怪的问题,即withRouter提供的HOC react-router没有将道具传递给mapStateToProps函数.我在这做错了吗？

import React, { Component } from 'react';
import { Link, withRouter } from 'react-router';
import { connect } from 'react-redux';


class ThisClass extends Component {
    render() {
        console.log(this.props.router); // Returns object with router keys (params, router, go, routes, ...)
        // Render stuff
    }
}

const mapStateToProps = (state, props) => {
    console.log(state); // returns state of redux
    console.log(props); // returns empty object -> {}, how come this is empty?!

    return {
        consultations: patientThisClassSelector(state, props)
    }; …

我是 React 新手，所以我确信我不理解 useLocation 的用例 - 比如它有什么用处和它不适合什么。

我想要一种方法，使特定组件可以知道任何位置更改，包括来自 PushState 的位置更改。注意：我正在转换 Anuglar JS 1.0 代码库，该代码库仅使用哈希中的所有查询信息。我想在此重写中使用 PushState 浏览器功能。

下面的示例代码（我只是将其作为新的 React 应用程序组件中的单个组件：

import React, { useEffect } from 'react';
import { useLocation } from 'react-router-dom';

const RandLocation: React.FC = () => {
    const location = useLocation();

    useEffect(() => {
        console.log('location: ', location);
    }, [location]);
    
    return (
        <div>
            <button 
            onClick={() => {const r =  Math.random(); window.history.pushState({'rnd': r }, '', '/?rnd=' + r)}}>
                Click Me</button>
            <br/>
        </div>
    )
}
export default RandLocation;

我只看到 useEffect 在加载时运行，以及使用浏览器按钮前进或后退。但当我点击“Click …