Как правильно сделать толчок?

Я делаю страницу входа в реакцию. Когда вход завершен, мой ответ должен перенаправить на мою страницу FrontFeed. Я использую this.props.history.push('/feed');, чтобы нажать на страницу, но когда я захожу на страницу входа и ввожу свои учетные данные, логин перенаправляется на логин с другим URL-адресом, и мне нужно снова войти в систему, и только во второй раз логин перенаправляется на FrontFeed.

Когда я захожу на страницу в первый раз

Я вошел в систему (учетные данные верны), и страница перенаправляется на ту же страницу, но с другим URL /#/ -> /?#/. Функции не вызываются, потому что заявки не сделаны, а локальное хранилище ничего не сохраняет.

Но при втором входе все работает нормально, заявки оформляются и локальное хранилище сохраняется, а моя страница перенаправляется на http://localhost:3000/?#/feed.

Я не уверен, правильно ли я использую react-router-dom. Но что-то не так.

import React from 'react';
import './css/App.css';

import MainPage from './pages/MainPage.js';

function App() {

  return (
    <MainPage/>
  );
}

export default App;

import React, { Component } from 'react';
import '../css/MainPage.css';
import FrontFeed from './FrontFeed.js';
import Login from './Login.js';

import {
  Route,
  NavLink,
  HashRouter
} from "react-router-dom";

export default class MainPage extends Component{

  componentDidMount() {
    var token = localStorage.getItem('Token');
    console.info(token);
  }

  render () {
    return (
      <HashRouter>
        <div className = "app">
            <div className = "content">
              <Route exact path = "/" component = {Login}/>
              <Route path = "/feed" component = {FrontFeed}/>
            </div>
        </div>
      </HashRouter>
    );
  }
}

import React, { Component } from 'react';
import '../css/Login.css';
import UserService from '../services/UserService'
import {ToastsContainer, ToastsContainerPosition, ToastsStore} from 'react-toasts';

export default class Login extends Component {

  constructor(props) {

    super(props);

    this.state = {
      user: new UserService(),
      password: '',
      username: '',
    }
  }

  componentDidMount() {
    var token = localStorage.getItem('Token');
    if (token) {
      this.props.history.push('/feed');
    }
  }

  handleChangeEventUsername(event) {
    this.setState({username: event.target.value});
  }

  handleChangeEventPassword(event) {
    this.setState({password: event.target.value});
  }

  handleSubmit(event) {
    this.state.user.login(this.state.username, this.state.password).then(res => {
      if (res.data.super) {
        localStorage.setItem('Token', res.data.key);
        ToastsStore.success('Login Sucess!');
      } else {
        ToastsStore.success("You aren't super!");
      }
      this.props.history.push('/feed');
    }).catch(err => {
      ToastsStore.success('Login Failed');
    })
  }

  render() {
    return (
      <div className = "loginContent">
        <ToastsContainer position = {ToastsContainerPosition.BOTTOM_CENTER}
                         store = {ToastsStore}/>
        <div className = "title">Login to ADM</div>
        <div className = "credentialsContainer">
          <form onSubmit = {e => this.handleSubmit(e)}>
            <div className = "username">
              Username:
              <div className = "inputUsername">
                <input type = "text"
                       value = {this.state.username}
                       onChange = {e => this.handleChangeEventUsername(e)} />
              </div>
            </div>
            <div className = "password">
              Password:
              <div className = "inputPassword">
                <input type = "password"
                       value = {this.state.password}
                       onChange = {e => this.handleChangeEventPassword(e)} />
              </div>
            </div>
            <div className = "submitButton">
            <input type = "submit" value = "Search" />
            </div>
          </form>
        </div>
      </div>
    );
  }
}