Javascript 反应路由器：无法访问专用路由

我没有得到我想要的帮助。我在下面的代码中添加了更多信息。我有一个受保护的路由，只有当用户登录并将isAuthenticated设置为true时，才能访问该路由。我遇到的问题是，即使成功登录并通过身份验证，我也会被重定向到登录页面。在下面的redux reducer文件中，默认情况下，isAuthenticated状态设置为null。奇怪的是，如果我将isAuthenticated默认值设置为true，然后成功登录，我就可以访问受保护的路由。但是，当isAuthenticated设置为null时，即使成功登录，我也无法访问受保护的路由。如果有人能帮忙，我将不胜感激。多谢各位

//加载用户操作文件

export const loadUser = () => (dispatch, getState) =>{

  dispatch({type: USER_LOADING});
  const token = getState().auth.token; 
 
  const config = {
    headers:{
      "Content-Type": "application/json"
    }
  }

if(token){
  config.headers['x-authorization'] = token;
}

  axios.get('/api/user/', config)
    .then(res => dispatch({
      type: USER_LOADED,
      payload: res.data
    }))
    .catch(err => {
      dispatch(returnErrors(err.response.data, err.response.status));
      dispatch({
        type: AUTH_ERROR
      });
    });
  };

//Redux还原文件

import{
  LOGIN_FAIL,
  LOGIN_SUCCESS,
  USER_LOADING,
  USER_LOADED,
  AUTH_ERROR
} from '../actions/types';

const initialState = {
  token: localStorage.getItem('token'),
  isAuthenticated: null,
  isLoading: false,
  user: null
};

export default function(state = initialState, action){
  switch(action.type){
    case USER_LOADING:
      return{
        ...state,
        isLoading: true
      };
    case USER_LOADED:
      return{
        ...state,
        isAuthenticated: true,
        isLoading: false,
        user: action.payload
      };
    case LOGIN_SUCCESS:
    localStorage.setItem('token', action.payload.token);
    return{
      ...state,
      ...action.payload,
      isAuthenticated: true,
      isLoading: false
    };
    case LOGIN_FAIL:
    case AUTH_ERROR:
    localStorage.removeItem('token');
      return{
        ...state,
        token: null,
        isAuthenticated: false,
        isLoading: false,
        user: null
      };

    default:
      return state;
  }

}

//ProtectedRoute文件

export const ProtectedRoute = ({
  isAuthenticated,
  component: Component,
  ...rest
})=>(
  <Route {...rest} component={(props) =>(
    isAuthenticated ? (
      <Component {...props}/>
    ):(
      <Redirect to="/login"/>
    )
  )}/>

)

ProtectedRoute.propTypes = {
  isAuthenticated: PropTypes.bool
}
const mapStateToProps = state =>({
  isAuthenticated: state.auth.isAuthenticated
});

export default connect(mapStateToProps)(ProtectedRoute)

export const ProtectedRoute=({
我得到了认证，
组件：组件，
休息
})=>(
(
我被认证了(
):(
)
)}/>
)
ProtectedRoute.propTypes={
IsAuthentication:PropTypes.bool
}
常量mapStateToProps=状态=>({
isAuthenticated:state.auth.isAuthenticated
});
导出默认连接（MapStateTops）（ProtectedRoute）

//App.js文件

class App extends Component{
  componentDidMount(){
    store.dispatch(loadUser());
  }
  render(){
  return(
  <Provider store={store}>
  <div className="App">
    <Router>
      <Switch>
        <Route exact path="/login" component={LoginPage}/>
        <ProtectedRoute exact path="/userfeed" component={UserFeed}/>
      </Switch>
    </Router>
  </div>
  </Provider>

);
}
};

export default App;

类应用程序扩展组件{
componentDidMount（）{
store.dispatch（loadUser（））；
}
render（）{
返回(
);
}
};
导出默认应用程序；

尝试使isAuthenticated:false而不是null处于初始状态，我想私有路由中的三元运算符会出现一些问题。为什么不简单地呈现

路由

或

重定向

，将“组件”属性扩展到

路由

，即

受保护的路由=（{isAuthenticated，…rest}）=>isAuthenticated？：？另外，为什么您的reducer会产生本地存储突变的副作用？还原程序应该是纯函数。我已经尝试过了，但它仍然会将我重定向到登录。我怀疑它在App.js文件中调度时与loadUser有关，因为当用户加载时，isAuthenticated设置为null，并且可能受保护的路由文件在用户加载时获取isAuthenticated的值，而不是用户加载的值。啊，可能您需要在私有路由中添加一个渲染分支来“等待”以解决任何挂起状态。换句话说，如果
isLoading
为true，则显示微调器或渲染null。Drew，你能给我举个例子吗？