javascript - React router dom 导航方法无法正常工作

Question

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

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

我将在下面分享我的三个组件代码以及索引页!

索引页

    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} />;
}

应用程序外壳组件

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;

我认为问题出在组件 Hook 中，因此我也尝试在构造函数内部实现重定向，但没有任何效果!

我在这里试图解决的基本业务问题是 - 用户每次尝试浏览另一个页面时都会被重定向到登录页面，无论有效登录(有效用户)是否基于本地存储上的有效 token

有人能说，我做错了什么吗？

Answer 1

在 react-router-dom v6 中，有关 protected 路由的身份验证实际上非常简单

创建一个访问身份验证上下文(本地状态、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 Hook 来获取用户尝试访问的当前位置。
• Outlet 组件，用于嵌套 protected 路由。
• Navigate 组件用于声明式导航，以路由状态发送当前位置，以便用户在身份验证后可以重定向回来。

用法示例:

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

登录 - 在身份验证处理程序中，经过身份验证后，设置 localStorage 并导航到在路由状态中传递的位置。

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>
    </>
  );
}