javascript - React Router v5 : history. push() 改变地址栏，但不改变页面

Question

如果在我的 React 应用程序中登录成功，我正在尝试将用户重定向到新页面。重定向是从不是组件的身份验证服务调用的。为了访问我的组件之外的历史对象，我在 React Router FAQ 中遵循了这个示例。 .但是，当我调用 history.push('/pageafterlogin') ，页面没有改变，我仍然在登录页面上(基于我的 Switch 我希望最终会出现在 404 页面上)。地址栏中的 URL 确实更改为 /pageafterlogin但该页面并未从登录页面更改。控制台中没有出现任何错误或任何其他表明我的代码不起作用的错误。
如何制作 history.push()还更改用户所在的页面？

// /src/history.js
import { createBrowserHistory } from 'history';
export default createBrowserHistory();

// /src/App.js
...
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
import history from './history';

function App() {
    return (
        <Router history={history}>
            <Switch>
                <Route path="/" exact component={HomePage} />
                <Route path="/login" exact render={() => <FormWrapper><LoginForm /></FormWrapper>} />
                <Route render={() => <h1>404: not found</h1>} />
            </Switch>
        </Router>
    );
}

export default App;

// src/services/auth.service.js
import axios from 'axios';
import history from '../history';

const API_URL = '...';

class AuthService {
    login(username, password) {
        return axios.post(API_URL + 'login', {
            username,
            password
        }).then(res => {
            if (res.status === 200) {
                localStorage.setItem('user', JSON.stringify(res.data));
                history.push('/pageafterlogin');
            }
        });
    }
}

Answer 1

而不是使用 BrowserRouter , 使用 Router来自 react-router-dom你可以看到example here

import { Router, Route, Switch, useHistory, create } from 'react-router-dom';
import { createBrowserHistory } from 'history';
import React from 'react';

const history = createBrowserHistory();


export default function App() {
    return (
        <Router history={history}>
            <Switch>
                <Route path="/" exact component={() => <h1>HomePage</h1>} />
                <Route path="/login" exact component={Login} />
                <Route render={() => <h1>404: not found</h1>} />
            </Switch>
        </Router>
    );
}


function Login() {
  React.useEffect(() => {
    history.push('/pageafterlogin')
  }, [])

  return <h1>Login page</h1>
}