Question

具有以下JSX

// Root.jsx
<BrowserRouter getUserConfirmation={this.handleLocationChange}>
                    <Switch>
                        <Route path='/' exact component={Search} />
                        <Route path='/queue/' component={Queue} />
                        <Route path='/healthCheck/' component={HealthCheck} />
                        <Route path='/transcript' component={Transcript} />
                    </Switch>
</BrowserRouter>

// Root.js
export class Root extends Component{
    constructor(props){
        super(props);
    }
    handleLocationChange(message, callback) {
        // your staff here
        console.log(`- - - location:`);
        callback(true);
    }
    render(){
        return RootTemplate.call(this);
    }
}

但是当我运行它时，我得到...

Root.jsx:25 Uncaught TypeError: Cannot read property 'handleLocationChange' of undefined
    at RootTemplate (Root.jsx:25)
    at Root.render (Root.js:13)

如果我尝试这个...

getUserConfirmation={()=>this.handleLocationChange()}

我没有收到错误，但也没有得到我期望的控制台。

我如何知道位置何时更改？

更新

我也只是为了测试而尝试过...

const getConfirmation = (message, callback) => {
    console.log("Welp this is working");
    callback(true)
};
...
<BrowserRouter getUserConfirmation={getConfirmation}>

但仍然看不到日志中的任何内容。

Answer 1

使用react-router中的Prompt组件。包括在您的组件之一中。

尝试不使用getUserConfirmation来执行此操作。

提示-https://reacttraining.com/react-router/core/api/Prompt

Answer 2

如果您尝试检查用户何时从应用程序中的一个位置导航到另一个位置，则应使用历史记录库。您还可以将其用于getUserConfirmation，这是当用户离开您的应用程序时。

import createHistory from "history/createBrowserHistory";
import { Router } from "react-router";

// Fires when user navigates away
const getUserConfirmation = () => console.log("User navigated away");

// Create your browser history
const history = createHistory({getUserConfirmation});

// Fires every time a location is updated
history.listen((location) => console.log("Navigated to page", location));

// Attach your browser history to your router
const MyRouter = () => <Router history={history> {your children} </Router>

使用React BrowserRouter（v4），如何识别位置已更改的时间？

2 个答案: