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

Question

嘿，我正在尝试构建一个具有导航功能的简单 React 应用程序。主题是我有 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;

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

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

谁能说，我做错了什么？

Answer 1

关于受保护路由的身份验证在 react-router-dom v6

中实际上非常简单

创建一个访问 auth 上下文（本地状态、redux 存储、本地存储等）的包装器组件，并根据 auth 状态为您要保护的嵌套路由呈现一个 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 用于声明式导航的组件，在路由状态中发送当前 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 并导航到路由状态中传递的位置。

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

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

React router dom navigate method is not working properly

javascript

reactjs

react-router-dom