react中访问某个路由时重定向到另一个路由

Question

我有一个用例，每当有人点击“/”路由时，我想从“/”路由重定向到/login。为了更清楚起见，我有一个指向“app.web.com/login”作为登录页面的应用程序。当有人尝试访问“app.web.com”时，它应该重定向到“app.web.com/login”。我正在使用 React Router 版本 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

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

您可以使用 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

Answer 2

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

login

，那么您希望将用户重定向到

logged in

页面。

因此，您可以做的是，您可以从当用户转到

route

时渲染的组件中执行此操作，而不是尝试使用

/

来完成此操作。

您可以检查

useEffect hook

，如果用户存在，则转到

/

，否则转到

/login

。

使用下面的示例：

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

Answer 3

使用react-router-dom中的Navigate非常简单。你去创建一个新组件，我将其命名为 home，并让它具有导航功能，该功能使用 to 键接收一个对象，然后将其设置为所需的重定向位置。

import { Navigate } from 'react-router-dom'

function Home() {
  
  Navigate({ to: '/login' })

}

export default Home

Answer 4

这是一种方法。让“/”路由指向与“/login”路径相同的元素。

    <Router>
          <Routes>
            <Route path="/" element={<LoginPage />} />
            <Route path="/login" element={<LoginPage />} />
          <Routes>
    <Router>