React学习时,outlet配置(token判定,页面path监听)

这篇具有很好参考价值的文章主要介绍了React学习时,outlet配置(token判定,页面path监听)。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

尽管写过 outlet 路由的配置。
考虑到 token 判定和 路由页 变更,我不了解v6是不是有更详解的做法。
决定调一下配置,期望 在任何页面异步更新时,token 都可以在跳转前 被检测到,防止无 token 跳转发生。

补上404页面( 地址栏 页面不存在时,展示404页面 )

React学习时,outlet配置(token判定,页面path监听)

为 src 文件配置 v6版本:路由子组件

App.js
import { HashRouter, Routes, Route } from 'react-router-dom';
import Main from './main';
import Login from './page/login'
import Home from './page/home/home'
import About from './page/about/about'
import Integrated from './page/integrated/integrated'
import Sidebar from './page/sidebar/sidebar'
import Latent from './page/latent/latent'
import Particulars from './page/particulars/particulars'
import SecurityCheck from './page/securityCheck/securityCheck'
import FourPage from './compoment/404';
function App() {
  {/* 默认显示页面将不需要填写路径 ,子路由不需要写/斜杠跳转时会带有*/ }
  return (
    <HashRouter>
      <Routes>
        {/* Main 负责token的判定(刷新和前往) */}
        <Route path='/' element={<Main />} >
          <Route path='/login' element={<Login />} ></Route>
          <Route path='/about' element={<About />} >
            <Route path='' element={<Integrated />} ></Route>
            <Route path='sidebar' element={<Sidebar />} >
              <Route path='' element={<Latent />} ></Route>
              <Route path='particulars' element={<Particulars />} ></Route>
              <Route path='securityCheck' element={<SecurityCheck />} ></Route>
            </Route>
          </Route>
          <Route path='/home' element={<Home />} ></Route>
        </Route>
        {/* 页面重定向,当跳转的页面不存在时,前往404~ */}
        <Route path='*' element={<FourPage />}></Route> 
      </Routes>
    </HashRouter>
  );
}

export default App;
index.js
import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

创建和 App.js 、index.js 同级别的 main.js
// main 组件, 充当 路由子组件的主体 
// 判定 page页发生改变
// 判定 token 的 状态变更

import React, { Component, useEffect, useState } from 'react'
import { Outlet, useLocation, useNavigate } from 'react-router-dom';
import storage from './util/storage';
const Main = () => {
    const location = useLocation(); //获取生命周期钩子(页面变化)
    const navigate = useNavigate(); //获取生命周期钩子(page跳转)
    const Token = storage.get('token'); //获取本地缓存:token
    const [newToken, oldToken] = React.useState()

    useEffect(() => { //监听location变化
        if (!Token) { //不存在
            if (location.pathname === '/') { //地址栏不全
                navigate('/login')
            }
            else if (location.pathname != '/login') {//地址为登录后
                navigate('/login')
            }
        } else { //存在
            if (location.pathname === '/') { //地址栏不全
                navigate('/login')
            }
        }
        oldToken(Token)
    }, [location,Token]) 
    return <Outlet context={[newToken, oldToken]}></Outlet>
}

export default Main

在src中,创建 util 配置文件夹

配置 storage.js
var storage = {
    set(key, value) { // 添加/编辑  缓存
        localStorage.setItem(key, JSON.stringify(value))

    },
    get(key) { // 取出缓存数据
        return JSON.parse(localStorage.getItem(key))

    },

    remover(key) { // 移除指定缓存
        localStorage.removeItem(key)

    }
}

export default storage;

为page文件创建

login.js 组件
import React, { Component } from 'react'
import storage from '../../util/storage'
import { useNavigate, useOutletContext } from 'react-router-dom';

const Login = () => {
  const [newToken, oldToken] = useOutletContext();
  const navigate = useNavigate();
  let params = {
      message: '这是跳转时携带的参数',
  }
  const storageToken = () => {
    if (!newToken) {
      storage.set('token', '这是被存储的token')
      navigate('/about', { state: params });
    } else {
      storage.remover('token')
    }
    oldToken(() => { return storage.get('token')})
  }

  const Btn = () => {
    if (!newToken) {
      return <>
        <button onClick={storageToken}>点击缓存token</button>
      </>
    } else {
      return <>
        <button onClick={storageToken}>点击清除token</button>
      </>
    }
  }

  return <>
    <h4>这里是登录前</h4>
    <Btn />
    <br />
    <span>{newToken}</span>
  </>
}
export default Login

React学习时,outlet配置(token判定,页面path监听)

about.js 组件
import React from 'react';
import storage from '../../util/storage'
import { Outlet, useNavigate, useLocation, useOutletContext } from 'react-router-dom';

export default function About() {
    const navigate = useNavigate();
    const [newToken, oldToken] = useOutletContext();
    // 需要注意的是 useNavigate() 跳转只能在无状态组件中进行 
    let ddd = ['c', 'n']

    const [count, setCount] = React.useState(ddd); // 数据共享
    // 需要注意的是,它只能传入两组字段,一组为原始数据,一组变更数据,用作对比时,每次数据变动
    // 页面随之更新  传入的数据类型由自己决定

    const state = useLocation() //接收参数
    console.log('state', state)

    //  navigate('', {}) // 前往默认页
    //  navigate('/home', {}) // 前往其他页
    //  navigate('文件名/子文件', {}) //前往子级
    //  navigate('文件名', {replace: true}) //前往当前路由其他同级页  replace: true 重定向
    return (
        <>
            <h4>About</h4>
            <button onClick={() => {
                navigate('test', { state: ddd });
                // state 传参不限制传参类型
            }}>点击Test页</button>

            <button onClick={() => {
                storage.remover('token'); 
                setTimeout(() => {
                    oldToken(storage.get('token'))
                }, 500)
            }} >在页内清token</button>
            <Outlet context={[count, setCount]} />
            <div>{newToken}</div>
        </>
    )
}

React学习时,outlet配置(token判定,页面path监听)文章来源地址https://www.toymoban.com/news/detail-510495.html

到了这里,关于React学习时,outlet配置(token判定,页面path监听)的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • react中使用定义数据并监听其值

    原因:定义了数据,搜索之后可以打印出来数据,但是会延迟得到搜索后的数据。 解决:对定义的数据进行 useEffect 监听,或者还有一个办法是加入定时器 setTimeOut 进行延迟

    2024年02月16日
    浏览(29)
  • React Dva 操作models中的subscriptions讲述监听

    接下来 我们来看一个models的属性 之前没有讲到的subscriptions 我们可以在自己有引入的任意一个models文件中这样写 这样 一进来 这个位置就会触发 这里 我们可以写多个 然后 我们运行后会发现 他们都是可以触发的 这里 我们可以用它来监听一些东西 然后触发我们models中的函数

    2024年02月14日
    浏览(50)
  • Error [ERR_PACKAGE_PATH_NOT_EXPORTED]: Package subpath ‘./lib/tokenize‘ is not defined by “exports“

    今天在启动一个react项目的时候,我运行了这个命令: 项目启动过程中,控制台突然报了这个 错误 : 原因: 原来是我当时安装这个项目需要的依赖的时候,使用的node版本比较低,最近升级了一下node版本导致的。 解决办法: 第一种办法:将当前的node版本切回到当时安装项目

    2024年02月12日
    浏览(50)
  • Vue页面监听 键盘按键

    1、监听方法 2、在mounted 钩子函数中调用 3、组合建 键盘keyCode:https://www.toptal.com/developers/keycode/for/arrow-left

    2024年02月15日
    浏览(37)
  • token和JWT token区别、登录安全、页面权限、数据权限、单点登录

     直接区别: token需要查库验证token 是否有效,而JWT不用查库或者少查库,直接在服务端进行校验,并且不用查库。因为用户的信息及加密信息在第二部分payload和第三部分签证中已经生成,只要在服务端进行校验就行,并且校验也是JWT自己实现的。     JWT是json web token缩写。

    2023年04月09日
    浏览(47)
  • vue 监听滚动条 页面滚动动画

    以页面底部的“回到顶部”功能为例,滚动动画的实现思路是,当点击按钮时,获取当前滚动条的位置,调用定时器函数,每个时间间隔对滚动条的位置递减,直至减小到0,清除定时器,即可回到页面顶部。 当滚动条没有离开首页的一个屏幕高度时,“回到顶部”按钮应设

    2024年02月06日
    浏览(41)
  • 小程序如何监听页面的滚动事件

    在小程序开发中,监听页面的滚动事件是一个常见的需求。通过监听页面的滚动事件,我们可以实现一些特殊效果,例如懒加载、下拉刷新等。本文将介绍如何在小程序中监听页面的滚动事件,并给出一些实用的示例代码。 引言 随着小程序的普及和发展,越来越多的开发者

    2024年02月08日
    浏览(60)
  • 基于深度学习的细胞感染性识别与判定

    随着深度学习技术的不断发展,其在医学图像处理领域的应用逐渐成为研究的热点。本文将探讨基于深度学习的细胞感染性识别与判定,该项目在生物医学领域具有重要的意义。 细胞感染性识别与判定是生物医学领域的一项关键任务。传统的细胞感染性检测方法通常依赖于人

    2024年01月21日
    浏览(27)
  • Vue页面监听键盘按键的多种方法

    在Vue页面中,可以使用多种方法来监听键盘按键。以下是至少五种常用的方法: 使用 @keydown 或 @keyup 指令来绑定键盘按键事件。 使用 v-on 指令来绑定键盘按键事件。 使用 window.addEventListener 来全局监听键盘按键事件。 使用 vue-shortkey 插件来监听键盘按键。 使用 keydown 事件监

    2024年02月07日
    浏览(37)
  • uni-app监听页面滚动

    在uni-app中可以通过监听页面滚动事件来实现滚动效果或响应滚动事件 在需要监听滚动的页面或组件中,添加一个 scroll 元素,用于容纳内容并实现滚动效果。 在页面或组件的方法中添加对应的滚动事件处理函数。

    2024年02月07日
    浏览(48)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包