React Router рендеринг пустых страниц с React Redux

Question

В моем 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 в public , а не компонентом 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

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

Answer 1

При использовании RR4 Попробуйте:

<Route path="/" component={App}>
<IndexRedirect to="/index" />
<Route path="index" component={Index} />

Обратитесь к следующему, чтобы получить правильный вариант использования: https://github.com/ReactTraining/react-router/blob/5e69b23a369b7dbcb9afc6cdca9bf2dcf07ad432/docs/guides/IndexRoutes.md