React 路由器 dom 导航方法无法正常工作

Question

嘿，我正在尝试构建一个具有导航功能的简单反应应用程序。 主题是我有 3 个组件，App、Test 和 AppShell。 App组件是默认（初始）组件。 我想要的是每次用户访问 App 组件时，我的应用程序都会重定向到 Test 组件。

我面临的问题是我的重定向仅在我第一次加载应用程序时才有效，之后我的重定向不起作用。

我将在下面与索引页一起分享我的三个组件代码！

索引页面

    import './index.css';
    import App from './App';
    import reportWebVitals from './reportWebVitals';
    import React from 'react';
    import ReactDOM from 'react-dom';
    import {
        BrowserRouter as Router,
        Routes,
        Route
    } from "react-router-dom";

    ReactDOM.render(
      <Router>
          <Routes>
              <Route path='/' element={<App />} />
              <Route path='/test' element={<Test />} />
          </Routes>
      </Router>,
      document.getElementById('root')
    );

    function Test() {
        return <h1>Test Me</h1>;
    }

    reportWebVitals();

应用组件

import "./App.css";
import AppShell from "./components/core/appShell";
import { useNavigate } from 'react-router-dom';

export default function App(props) {
    let navigate = useNavigate();
    return <AppShell {...props} navigate={navigate} />;
}

应用 shell 组件

import React, { Component } from 'react';
import { Outlet } from "react-router-dom";

class AppShell extends Component {

    componentDidMount() {
        this.props.navigate('/test');
    }

    render() {
        return (
            <div>
                <h1>This is app shell</h1>
                <Outlet />
            </div>
        );
    }
}

export default AppShell;

我认为问题出在组件钩子上，所以我也尝试在构造函数中实现重定向，但对我没有任何作用！

我在这里尝试解决的基本业务问题是 - 用户将被重定向到登录页面，每次他/她尝试浏览另一个页面时，无论是否有效登录（有效用户）都可能基于本地存储上的有效令牌

谁能说，我做错了什么？

Answer 1

在react-router-dom v6 中，关于受保护路由的身份验证实际上非常简单

创建一个访问身份验证上下文（本地 state、redux 存储、本地存储等）的包装组件，并根据身份验证状态为您要保护的嵌套路由呈现一个Outlet组件，或重定向到您的身份验证端点。

示例AuthWrapper ：

const AuthWrapper = () => {
  const location = useLocation();
  const token = !!JSON.parse(localStorage.getItem("token"));

  return token ? (
    <Outlet />
  ) : (
    <Navigate to="/login" replace state={{ from: location }} />
  );
};

用途：

• useLocation钩子来获取用户试图访问的当前位置。
• 嵌套保护路由的Outlet组件。
• 用于声明式导航的Navigate组件，在路由 state 中发送当前location ，以便用户可以在身份验证后重定向回来。

示例用法：

<Router>
  <Routes>
    <Route element={<AuthWrapper />}>
      <Route path="/" element={<App />} />
    </Route>
    <Route path="/login" element={<Login />} />
    <Route path="*" element={<Navigate to="/" replace />} />
  </Routes>
</Router>

登录 - 在身份验证处理程序中，一旦通过身份验证，设置 localStorage 并导航到在路由 state 中传递的位置。

function Login() {
  const { state } = useLocation();
  const navigate = useNavigate();

  const { from = "/" } = state || {};

  const login = () => {
    localStorage.setItem("token", JSON.stringify(true));
    navigate(from);
  };
  return (
    <>
      <h1>Test Me</h1>
      <button type="button" onClick={login}>Log In</button>
    </>
  );
}