在访问路由时重定向到另一条路由

Question

我有一个用例，我想在有人点击“/”路由时从“/”路由重定向到 /login。为了更清楚起见，我有一个指向 'app.web.com/login' 作为登录页面的应用程序。当有人试图访问 'app.web.com' 时，它应该重定向到 'app.web.com/login'。我正在使用 React 路由器版本 6，这是我尝试过的。

      <Routes>
        <Route path='/'>
          <Navigate to="/auth/login" />
        </Route>
        <Route path='auth' element={<AuthView />}>
          <Route path='login' element={<LoginView />} />
        </Route>
        <Route path='*' element={<NotFoundView />} />
      </Routes>

但是没有达到预期的效果。我几乎只是在做出反应，所以我相信有一种简单的方法可以做到这一点。

Answer 1

如果我理解正确，那么如果用户不是 logged in.

，您希望将用户重定向到 login 页面

所以你可以做的是，而不是尝试使用 route 来做，你可以从当用户转到 /.[=18= 时呈现的组件来做]

您可以检查 useEffect hook 如果用户存在则转到 / 否则转到 /login。

使用下面的示例：

useEffect(() => {
  if(!user) {
    navigate('/')
  }
}, [user])

Answer 2

你可以做的是制作一个小组件，在“/”路由上呈现，将你重定向到登录页面。

您可以为此使用 useHistory 挂钩。

下面是一个类似组件的示例。

import React, { useEffect } from 'react';
import { useHistory } from 'react-router-dom';

export const RedirectToLogin: React.FC = () => {
    const history = useHistory();

    useEffect(() => {
        history.push('/auth/login');
    });

    return null;
};

您的路由器组件如下所示：

<Routes>
    <Route path='/' element={<RedirectToLogin />} />
    <Route path='auth' element={<AuthView />}>
      <Route path='login' element={<LoginView />} />
    </Route>
    <Route path='*' element={<NotFoundView />} />
  </Routes

在访问路由时重定向到另一条路由

Redirect to another route when accessing a route in react

reactjs

react-dom