当无法访问 react-router 的历史对象时，如何将用户重定向到不同的 URL

Question

当我无法访问 react-router 的历史属性时，我应该如何将用户重定向到不同的 url？

我想做的是当用户单击导航菜单上的注销链接时，用户将被重定向到根路径"/"。

handleAuthentication(event) {
    this.props.toggleAuthenticationStatus(() => {
        // I want to redirect an user to the root path '/' in this callback function.
    });
}

当用户单击导航菜单上的登录/注销链接时，将调用 handleAuthentication 方法。

toggleAuthenticationStatus(callback) {
    this.setState((prevState, props) => {
            return { isLoggedIn: !prevState.isLoggedIn }
        },
        callback()
    );
}

然后，当导航菜单组件中的handleAuthentication方法时，它会调用应用程序组件中的切换身份验证状态方法，该方法更改登录/注销的状态并运行在导航菜单组件的handleAuthentication方法中定义的回调函数。

可以直接运行"window.location.href = '/'"吗？它是否弄乱了反应路由器历史记录对象???

任何人都可以请问我应该如何以正确的方式实现用户重定向？

应用组件

import React, { Component } from 'react';
import NavigationMenu from './NavigationMenu';
import { BrowserRouter, Route, Switch } from 'react-router-dom';
import Secret from './Secret';
import Top from './Top';
export default class App extends Component {
    constructor(props) {
        super(props);
        this.state = {
            isLoggedIn: false
        };
        this.toggleAuthenticationStatus = this.toggleAuthenticationStatus.bind(this);
    }

    toggleAuthenticationStatus(callback) {
        this.setState((prevState, props) => {
                return { isLoggedIn: !prevState.isLoggedIn }
            },
            callback()
        );
    }

    render() {
        return (
            <BrowserRouter>
                <div>
                    <NavigationMenu isLoggedIn={this.state.isLoggedIn} toggleAuthenticationStatus={this.toggleAuthenticationStatus} />
                    <Switch>
                        <Route path='/secret' render={(props) => <Secret isLoggedIn={this.state.isLoggedIn} {...props} />} />
                        <Route path='/' component={Top} />
                    </Switch>
                </div>
            </BrowserRouter>
        )
    }
}

导航菜单组件

import React, { Component } from 'react';
import { Link } from 'react-router-dom';
class NavigationMenu extends Component {
    constructor(props) {
        super(props);
        this.handleAuthentication = this.handleAuthentication.bind(this);
    }
    handleAuthentication(event) {
        this.props.toggleAuthenticationStatus(() => {
            // I want to redirect an user to the root path '/' in this callback function.
        });
    }
    render() {
        return (
            <ul>
                <li><Link to='/'>Top</Link></li>
                <li><Link to='/secret'>Secret</Link></li>
                <li><Link to='/login' onClick={this.handleAuthentication}>
                    {this.props.isLoggedIn === true ? 'Logout' : 'Login'}
                </Link></li>
            </ul>
        )
    }
}
export default NavigationMenu;

Answer 1

我在react-router中找到了方法'withRouter'。这似乎是我情况的解决方案。我将尝试使用它。

https://reacttraining.com/react-router/web/api/withRouter

您可以访问历史对象的属性和最近的 通过 withRouter 高阶组件进行匹配。带路由器 每次路由更改时都会重新渲染其组件，使用 与渲染道具相同的道具：{匹配，位置，历史}。