response-router не отображает указанные c маршруты (React + Redux)

Question

Я использую React с Redux. При аутентификации, т.е. когда this.props.isAuthenticated = true, / add не отображается, а вместо этого отображается / route. Однако, если я перейду / добавлю из условия this.props.isAuthenticated, он будет отображаться. Я не могу понять, почему это происходит.

Приложение. js

import React, { Component } from 'react';
import { Route, Switch, withRouter, Redirect, Link} from 'react-router-dom';

import { connect } from 'react-redux';
import './App.css';
import asyncComponent from './hoc/asyncComponent/asyncComponent';
import * as action from './store/actions/index';

const asyncSignUp = asyncComponent(() => {
  return import('./containers/Signup/Signup');
})

const aysncLogin = asyncComponent(() => {
  return import('./containers/Login/Login');
})

const asyncAddStore = asyncComponent(() => {
  return import ('./containers/Add/Add');
})


const asyncGetHome = asyncComponent(() => {
  return import ('./containers/Home/Home');
})

class App extends Component {

  componentDidMount() {
    this.props.onTryAutoLogin();
  }

  render(){
    let route = (
      <Switch>
        <Route path="/signup" component={asyncSignUp} />
        <Route path="/login" component={aysncLogin} />

        <Redirect to="/"/>
       </Switch>
    );
    if(this.props.isAuthenticated){

        route = (
          <Switch>

            <Route path="/add" component={asyncAddStore} />

            <Route path="/" exact component={asyncGetHome}/>

            <Redirect to="/"/>
          </Switch>
        );


    }

    return (
      <div className="App">
        <header className="App-header">

          {route}

        </header>
      </div>
    );
  }
}

const mapStateToProps = state => {
  return {
    isAuthenticated: state.auth.token !== null,
    userData: state.auth.data
  };
};

const mapDispatchToProps = dispatch => {
  return {
    onTryAutoLogin: () => dispatch(action.authCheckState())
  };
};

export default withRouter(connect(mapStateToProps, mapDispatchToProps)(App));

authComponent. js

import React, { Component } from 'react';

const asyncComponent = (importComponent) => {
    return class extends Component {
        state = {
            component: null
        };

        componentDidMount(){
            importComponent().then(cmp => {
                this.setState({component: cmp.default});
            });
        }

        render(){
            const C = this.state.component;

            return C ? <C {...this.props}/> : null;
        }
    }
}

export default asyncComponent;

Answer 1

У вас есть <Route path="/add" component={asyncAddStore} />, но вы объявляете const asyncAdd = .... Я предполагаю, что asyncAdd должен быть asyncAddStore?

Делая это предположение, я думаю, ваша проблема может быть за пределами предоставленного вами файла:

1. Убедитесь, что ваш компонент <Switch> находится внутри компонента <Router> (или <BrowserRouter>) ... у вас может быть компонент в родительском элементе App.js

2. Также убедитесь, что вы визуализируете компонент вашего приложения (вам нужно обернуть <Switch> в <Router>, как указано выше) или что вы визуализируете родительский компонент <App>. , вот так ...

   ReactDOM.render ( , document.getElementById ('root'));