react-router 不渲染特定路由（React + Redux）

Question

我正在将 React 与 Redux 一起使用。当经过身份验证时，即当 this.props.isAuthenticated=true 时 /add 没有被渲染，而不是 / 路由被渲染。但是，如果我将 /add 移出 this.props.isAuthenticated 条件，它将被渲染。我无法弄清楚为什么会这样。

App.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 的父组件中可能有一个/p>

2. 还要确保您正在渲染您的 App 组件（您需要像上面一样将您的 <Switch> 包装在 <Router> 中）或者您正在渲染 <App>'s父组件，像这样...

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