Ionic React添加登录认证后根路径空白 如何自动重定向到/login页面

问题原因 #

你当前根路径/直接挂载了SignOutTabs组件，访问根路径时没有匹配到SignOutTabs内部的子路由规则，所以页面显示空白。你只需要补充根路径的重定向规则，就能实现启动自动跳转到/login。

具体修改步骤 #

1. 修改App.tsx的路由逻辑 #

首先完善路由导入，增加Switch和重定向规则：

// 先补充导入Switch组件
import { Redirect, Route, Switch } from 'react-router-dom';

const IonicApp: React.FC = () => {
  const [isLoggedIn, setIsLoggedIn] = useState(false);
  const user = useContext(UserContext);

  user.setIsLoggedIn = setIsLoggedIn;

  return(
    <IonApp>
      <IonReactRouter>
        <Switch>
          {/* 已登录路由 */}
          {isLoggedIn && <Route path="/" component={SignInTabs} />}
          {/* 未登录路由，包含/login路径 */}
          {!isLoggedIn && <Route path="/" component={SignOutTabs} />}
          {/* 根路径精确匹配重定向规则 */}
          <Route exact path="/">
            <Redirect to={isLoggedIn ? "/home" : "/login"} />
          </Route>
        </Switch>
      </IonReactRouter>
    </IonApp>
  )
}

2. 确认SignOutTabs的路由配置 #

确保你的SignOutTabs组件内已经配置了/login路径和LoginComponent的对应关系，示例如下：

// ./components/Tabs/SignedOut.tsx 示例
import { Switch, Route } from 'react-router-dom';
import { LoginComponent } from '../你的路径/LoginComponent';

export const SignOutTabs: React.FC = () => {
  return (
    <Switch>
      <Route exact path="/login" component={LoginComponent} />
      {/* 其他未登录页面路由可在此补充 */}
    </Switch>
  )
}

可选优化：调整Context写法 #

你当前的Context直接修改全局对象的写法不符合React规范，容易引发状态更新异常，可以调整为如下写法：

// App.tsx调整后的完整Context相关代码
interface IUserManager {
  isLoggedIn: boolean;
  setIsLoggedIn: (val: boolean) => void;
}

export const UserContext = React.createContext<IUserManager>({
  isLoggedIn: false,
  setIsLoggedIn: () => {}
});

const App: React.FC = () => {
  const [isLoggedIn, setIsLoggedIn] = useState(false);
  return (
    <UserContext.Provider value={{isLoggedIn, setIsLoggedIn}}>
      <IonApp>
        <IonReactRouter>
          <Switch>
            {isLoggedIn && <Route path="/" component={SignInTabs} />}
            {!isLoggedIn && <Route path="/" component={SignOutTabs} />}
            <Route exact path="/">
              <Redirect to={isLoggedIn ? "/home" : "/login"} />
            </Route>
          </Switch>
        </IonReactRouter>
      </IonApp>
    </UserContext.Provider>
  )
}

export default App;

修改完成后重启ionic serve，访问根路径就会自动跳转到/login登录页了。

内容的提问来源于stack exchange，提问作者nba_tino