React Router отображает пустые страницы с помощью React Redux

В моем App.js у меня есть следующее:

const Index = asyncRoute(() => import('~/pages/index'))
const Register = asyncRoute(() => import('~/pages/register'))
const AddDesign = asyncRoute(() => import('~/pages/add-design'))
const Login = asyncRoute(() => import('~/pages/login'))

class App extends Component {
  render() {
    const { isLoggedIn } = this.props;

    if (!isLoggedIn){
      return (
          <Switch>
              <Route path = {'/login'} component = {Login} />
              <Route path = {'/register'} component = {Register} />
              <Redirect to = {'/login'} />
          </Switch>
      );
    }
    return (
      <Switch>
        <Route exact path='/' component = {Index}/>
        <Route exact path='/add-design' component = {AddDesign}/>
        <Route exact path = "/login" render = {() => <Redirect to = "/"/>} />
        <Route exact path = "/register" render = {() =>  <Redirect to = "/"/>} />
        <Redirect to = {'/'} />
      </Switch>
    );
  }
}

function mapStateToProps({ user }) {
  return {
    isLoggedIn: !!user.token,
  };
}

export default connect(mapStateToProps)(App);

Когда пользователь входит в систему, isLoggedIn устанавливается на true, а затем пытается перенаправить пользователя обратно на "/".

Это происходит, однако загруженная страница - это файл index.html в общественный, а не компонент Index.

Я не уверен, имеет ли это значение, но мой asyncRoute - это обходной путь для FOUC:

import React, { Component } from 'react'
import PropTypes from 'prop-types'

import Loading from '~/components/Loading'

class AsyncImport extends Component {
  static propTypes = {
    load: PropTypes.func.isRequired,
    children: PropTypes.node.isRequired
  }

  state = {
    component: null
  }

  _hasClass(target, className) {
     return new RegExp('(\\s|^)' + className + '(\\s|$)').test(target.className);
  }

  toggleFoucClass () {
    const root = document.getElementById('root')
    if (this._hasClass(root, 'fouc')) {
      root.classList.remove('fouc')
    } else {
      root.classList.add('fouc');
    }
  }

  componentWillMount () {
    this.toggleFoucClass()
  }

  componentDidMount () {
    this.props.load()
      .then((component) => {
        setTimeout(() => this.toggleFoucClass(), 1)
        this.setState(() => ({
          component: component.default
        }))
      })
  }

  render () {
    return this.props.children(this.state.component)
  }
}

const asyncRoute = (importFunc) =>
  (props) => (
    <AsyncImport load = {importFunc}>
      {(Component) => {
        return Component === null
          ? <Loading size = "large" />
          : <Component {...props} />
      }}
    </AsyncImport>
  )

export default asyncRoute

Может ли кто-нибудь объяснить, почему мои пользователи маршрутизируются, но компонент не отображается?