当所有路由根据条件动态加载时如何重定向到路由？答案

【问题标题】：How to redirect to route when all routes are loaded dynamically based on condition?当所有路由根据条件动态加载时如何重定向到路由？
【发布时间】：2021-08-10 04:09:55
【问题描述】：

这是我根据上下文中的用户对象加载路由（反应路由器 dom 5）的代码。

function App() {
  return (
      <UserContextProvider>
        <BrowserRouter>
          <Navigation/>
        </BrowserRouter>
      </UserContextProvider>
  );
}

导航代码。这里我有条件地加载路由。

function Navigation() {

  const { contextState } = useUserContext();

  const routes = contextState.user ? routesAuthenticated : routerUnauthenticated;
  
  return (
    <Switch>
        {routes.map((route, index) => {
            return (
                <Route
                    key={index}
                    path={route.path}
                    exact={route.exact}
                    render={(props: RouteComponentProps) => (
                        <route.component name={route.name} {...props} {...route.props} />
                    )}
                />
            );
        })}
    </Switch>
  );
}

您会看到，基于上下文用户对象，我加载了不同的路由。路由是简单的配置文件：

export const routerUnauthenticated: IRoute[] = [
  {
    path: '/register',
    name: 'Register page',
    component: RegisterPage,
    exact: false,
  },
  {
      path: '/login',
      name: 'Login page',
      component: LoginPage,
      exact: false,
  }...

问题是我在路线http://localhost:3000/login 上，成功登录后，我得到了路线http://localhost:3000/login 的空白页面。在登录之前，我有 3 条路由登录/注册/主页。登录后，我有 5 条路线仪表板/个人资料... 我要做的是在成功登录后到达/dashboard 路由，但由于我的想法是动态路由加载，我不知道如何导航。

在我的上下文中登录是一个简单的假功能：

try {
        setContextState({ type: ContextActions.LOGIN_IN_PROGRESS });

        setTimeout(() => {console.log({ userId: 1, username: 'admin@admin.com' });
          setContextState({ type: ContextActions.LOGIN_SUCCESS, payload: { user: { userId: 1, username: 'admin@admin.com' } } });
        }, 3000);
      } catch(error) {
        setContextState({ type: ContextActions.LOGIN_ERROR });
      }

【问题讨论】：

标签： reactjs react-router react-router-dom

【解决方案1】：

这是被广泛使用的最常见的protectedRoute组件。

const App = () => {
    const { user } = useAuth();
  return (
    <Router>
        <Route path="/public">
          <Public />
        </Route>
        <Route path="/login">
          <Login />
        </Route>
        <PrivateRoute path='/protected' user={user}>
          <Protected />
        </PrivateRoute>
      </div>
    </Router>
  )
}

const PrivateRoute = ({ children, user, ...rest }) => (
    <Route {...rest} render={({ location }) => {
      return user === null
        ? <Redirect to={{
            pathname: '/login',
            state: { from: location }
          }}
        />
        : children
    }} />
)

【讨论】：

【解决方案2】：

为什么不直接加载所有路由？您可以使用自定义 Route 组件来查看 contextState.user 是否存在有点像一个受保护的路由，如果未经身份验证的用户转到该路由，它会重定向到 /login 或 /register。

【讨论】：

这个问题需要正确回答这种查询或解释可以在cmets中给出
其实最后我是这样解决的。感谢您提供有关受保护路线的想法。
@1110 添加了一个常用的protectedRoute 组件，看看是否有帮助:)