React.js 页面不切换

Question

我正在尝试使用 react-hook、react-router-dom、redux 来控制页面。
实现了登录界面，编写了登录成功时尝试切换到主页面的代码。

所以我使用了 react-router 的 history.push。
但是，history.push 只改变浏览器的 url，而不是页面上显示的实际信息。
代码如下所示。

简要代码说明，
id 和密码被放入 redux 并作为 getelementbyuId 获取并作为表单数据发送。
登录功能正常。
写入“userUpdateUserInfo”的 history.push ('/') 根本不起作用。
只有浏览器的 url 改变，而不是主页。

App.tsx

import React from 'react';
import { Route, Switch } from 'react-router-dom';
import { Main, Login } from './pages';

import './css/App.css';

const App: React.FC = () => {
  return (
    <div>
      <div className="App-contents-area">
        <Switch>
          <Route exact path="/" component={Login} />
          <Route exact path="/main" component={Main} />
          {/* <Redirect path="*" to="/" /> */}
        </Switch>
      </div>
    </div>
  );
}

export default App;

LoginPage.tsx

import React from 'react';
import { Login } from 'Component';

function LoginPage() {
  return (
    <Login />
  );
}

export default LoginPage;

Login.tsx（组件）

import React from 'react';
import {
  LoginTitle, LoginAvatar, LoginUserId, LoginUserPassword, LoginButton
} from '..';

import '../../css/Login.css';

function Login() {
  return (
    <div className="Login">
      <div className="Login-form-data">
        <LoginTitle /> // code skip
        <LoginAvatar /> // code skip
        <LoginUserId /> // code skip
        <LoginUserPassword /> // code skip
        <LoginButton />
      </div>
    </div>
  );
}

export default Login;

LoginButton.tsx（组件）

import React from 'react';
import { useUpdateUserInfo } from 'Hook';

function LoginButton() {
  const { handleLogin } = useUpdateUserInfo(); // custom hook

  return (
    <div className="LoginButton">
      <button className="LoginButton-button" onClick={handleLogin}>Login</button>
    </div>
  );
}

export default LoginButton;

userUpdateUserInfo.tsx（自定义挂钩）

import { useCallback } from 'react';
import { useSelector, useDispatch } from 'react-redux';
import { RootState } from 'Store/modules';
import { updateUserInfo } from 'Store/modules/user';
import { userLoginStatus } from 'Store/modules/login';

import { msg } from 'Lang';
import {
  axiosPost, history, 
  _ShowFail, _ShowSuccess, _ShowSelect
} from 'Module';

export default function useUpdateUserInfo () {
  const { id, name, tel, email } = useSelector((state: RootState) => state.user);
  let { isLogin } = useSelector((state: RootState) => state.login);
  const dispatch = useDispatch();


  const handleLogin = useCallback(async () => {
    try {
      const userId: string = (document.getElementById('LoginUserId-id') as HTMLInputElement).value.trim();
      const userPw: string = (document.getElementById('LoginUserPassword-password') as HTMLInputElement).value.trim();

      if (!userId.length) { return _ShowFail(msg.pleaseInputUserId); }
      if (!userPw.length) { return _ShowFail(msg.pleaseInputUserPassword); }

      const formData: FormData = new FormData();
      formData.append('userId', userId);
      formData.append('userPw', userPw);

      const url = '/login/check-login-info';
      const config = {
        headers: {
          'Content-Type': 'multipart/form-data',
        },
      };

      const res = await axiosPost(url, formData, config);

      if (res.data.res) {
        _ShowSuccess('login success');
        const userInfo = {
          id: res.data.rows[0].id,
          name: res.data.rows[0].name,
          email: res.data.rows[0].email,
          tel: res.data.rows[0].tel,
        };

        isLogin = true;
       /**************************/
        history.push('/main');    // now working
       /**************************/
        dispatch(updateUserInfo(userInfo));
        dispatch(userLoginStatus({ isLogin }));
      }
      else {
        _ShowFail('login fail');

        isLogin = false;

        dispatch(updateUserInfo({ id, email, name, tel }));
        dispatch(userLoginStatus({ isLogin }));
      }
    }
    catch (error) {
      _ShowFail(error.message);
    }
  }, [dispatch]);

  return { handleLogin };
};

MainPage.tsx

import React from 'react';

function MainPage() {
  return (
    <div>
      <h2>MainPage!!</h2>
    </div>
  );
}

export default MainPage;

history.tsx

import { createBrowserHistory } from 'history'
export default createBrowserHistory();

从昨晚开始，我就一直被这个问题困扰。
如何更改页面的内容？

Answer 1

在 App.js 中，你的路由假设在 中，

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

（除非你把它包裹在 index.js 上，不包括这里并且 App 是在里面导入的）？