Reactjs 当我尝试在新选项卡中加载页面时，React路由器重定向到基本URL

我一直在做一个react项目，大约4天前我遇到了一个问题。当我尝试在新选项卡中打开链接时，它会重定向到主/基本url。请帮我修复这个错误

渲染路由方法

export const renderRoutes = (routes = []) => (
  <Suspense fallback={<Loader />}>
    <Switch>
      {routes.map((route, i) => {
        const Guard = route.guard || Fragment;
        const Layout = route.layout || Fragment;
        const Component = route.component;

        return (
          <Route
            key={i}
            path={route.path}
            exact={route.exact}
            render={(props) => (
              <Guard>
                <Layout>
                  {route.routes
                    ? renderRoutes(route.routes)
                    : <Component {...props} />}
                </Layout>
              </Guard>
            )}
          />
        );
      })}
    </Switch>
  </Suspense>
);

const GuestGuard = (props) => {
  console.log(props, BASE_URL)
  if (props.isLoggedIn) {
    console.log(BASE_URL)
    return <Redirect to={BASE_URL} />;
  }

  return (
    <React.Fragment>
      {props.children}
    </React.Fragment>
  );
};

GuestGuard.propTypes = {
  isLoggedIn: PropTypes.bool.isRequired
}

const mapStateToProps = (state) => ({
  isLoggedIn: state.auth.isLoggedIn
})

export default connect(mapStateToProps, )(GuestGuard);

const AuthGuard = ({ children, isLoggedIn }) => {
    // console.log(children, 393)
    if (!isLoggedIn) {
        return <Redirect to="/auth/signin-1" />;
    }
    console.log("LOGGED IN", children.props)
    return (
        <React.Fragment>
            {children}
        </React.Fragment>
    );
};

AuthGuard.propTypes = {
    isLoggedIn: PropTypes.bool.isRequired
  }

const mapStateToProps = (state) => ({
    isLoggedIn: state.auth.isLoggedIn
})

export default connect(mapStateToProps, )(AuthGuard);

商店（与App.js的目录相同）

auth reducer

const initialState = {
  isLoggedIn: false,
  isInitialised: false,
  user: null
};
  
export default function (state = initialState, action) {
  switch (action.type) {
    case ACCOUNT_INITIALISE: {
        const { isLoggedIn, user } = action.payload;
        return {
            ...state,
            isLoggedIn,
            isInitialised: true,
            user
        };
    }
    case LOGIN: {
        const { user } = action.payload;
        return {
            ...state,
            isLoggedIn: true,
            user
        };
    }
    case LOGOUT: {
        localStorage.removeItem('serviceToken');
        return {
            ...state,
            isLoggedIn: false,
            user: null
        };
    }
    default: {
        return { ...state };
    }
}
  }

---

我认为您需要在这里调试应用程序流。下面是根本原因，当链接在新选项卡中打开时，它受到authGuard的保护，“在useEffect中调用的init方法”正在异步调用api。因此，authGuard第一次得到isloggedIn false并重定向到“/auth/signin-1”。同时，isloggedIn设置为true，guestGuard重定向到登录页面

您在此处有以下选项： 除非收到api的响应，否则不要加载路由器。在获得响应时显示加载程序

---

希望您能在这里找到问题所在，此答案有助于您解决问题。

感谢您的回复@Aman您建议我如何安排流程？

export const init = () => (dispatch) => {
    try {
      const serviceToken = window.localStorage.getItem('serviceToken');        
      if (serviceToken) {
        setSession(serviceToken);
        axios.get('http://localhost:8000/api/auth/user', tokenConfig())
        .then(response => {         
          const user = response.data;
          dispatch({
            type: ACCOUNT_INITIALISE,
            payload: {
              isLoggedIn: true,
              user
            }
          })
        }).catch(err=>{
          dispatch({
            type:LOGOUT
          })
        })
      } else {
        dispatch({
          type: ACCOUNT_INITIALISE,
          payload: {
            isLoggedIn: false,
            user: null
          }
        });
      }
    } catch (err) {
      console.error(err);
      dispatch({
        type: ACCOUNT_INITIALISE,
        payload: {
          isLoggedIn: false,
          user: null
        }
      });
    }
  };

import {createStore, applyMiddleware, compose } from 'redux'
import thunk from 'redux-thunk'
import rootReducer from './reducers/index'

const initialState = {};

const middleware = [thunk];

const store = createStore(
    rootReducer,
    initialState,
    compose(
      applyMiddleware(...middleware),
      window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()
    )
  );

export default store;

const initialState = {
  isLoggedIn: false,
  isInitialised: false,
  user: null
};
  
export default function (state = initialState, action) {
  switch (action.type) {
    case ACCOUNT_INITIALISE: {
        const { isLoggedIn, user } = action.payload;
        return {
            ...state,
            isLoggedIn,
            isInitialised: true,
            user
        };
    }
    case LOGIN: {
        const { user } = action.payload;
        return {
            ...state,
            isLoggedIn: true,
            user
        };
    }
    case LOGOUT: {
        localStorage.removeItem('serviceToken');
        return {
            ...state,
            isLoggedIn: false,
            user: null
        };
    }
    default: {
        return { ...state };
    }
}
  }