hx_programmer的博客

react-router-dom现在发了6.0版本，目前不稳定,这里我们使用5.X基础步骤第一步安装包npm i [email protected]第二步导入包，并使用。import { HashRouter, Route, Link } from 'react-router-dom'第三步使用Link指定导航链接使用Route指定路由规则(哪个路径展示哪个组件)路由三大对象之-RouterRouter 组件：包裹整个应用，一个 R...

这里给出的解决方案是封装一个鉴权路由组件组件代码import { hasToken } from '@/utils/storage' // 这里是封装了获取token的函数import React from 'react'import { Route, Redirect } from 'react-router-dom'// 我们需要解构所有的属性，除了component属性export default function PrivateRoute ({ component, path })

问题导入 一般我们在非组件中跳转路由,由于hooks只能在函数组件中使用,所以我们在非组件中可以用window.location.href,例如:window.location.href = '/login'这里有一个问题,就是使用window.location.href跳转路由会刷新页面,那么如何在不刷新页面的情况下跳转路由呢,接下来我们来说一下解决办法背景react-router-dom中直接有Router这个包，但是它Router 没有histo...

111111

useContext基本使用可以分为固定的三步 1.根组件导入并调用createContext方法，得到Context对象，并导出import { createContext } from 'react'export const Context = createContext() 2.在根组件中使用 Provider 组件包裹需要接收数据的后代组件，并通过 value 属性提供要共享的数据return ( <Context.Provider val...

1.使用useRef获取DOM元素const refContainer = useRef(null);console.log(refContainer)返回一个可变的 ref 对象，该对象只有个 current 属性，初始值为传入的参数( null)。可以把这个ref对象利用元素的ref属性绑定在dom元素上,示例如下:import React, { useRef } from 'react'import reactDom from 'react-dom'export .

概念:接收一个包含命令式、且可能有副作用代码的函数使用时有几种使用方式: 1.不带第二个参数。执行时机：初始执行，每次更新之后都要执行。 可以模拟 componentDidmount + componentDidUpdateuseEffect(() => { // 副作用函数的内容}) 2.带第二个参数，参数是空数组。执行时机：只执行第一次。模拟 componentDidMountuseEffect(() ...

为什么要使用React-redux 每个组件都需要单独导入store 在根组件上的写法不友好 什么是react-redux是 Redux 官方提供的 React 绑定库 React 和 Redux 是两个独立的库，两者之间职责独立。 Redux可以和其他的js库，框架一起使用，而并不专门用于react。 为了实现在 React 中使用 Redux 进行状态管理 ，就需要一种机制，将这两个独立的库关联在一起。这时候就用到 React-Redux 这个绑定库了

什么是reduxRedux 是 JavaScript 应用的状态容器，提供可预测的状态管理。为什么Rect要用 ReduxReact 是 DOM 的一个抽象层（UI 库），并不是 Web 应用的完整解决方案。因此react在涉及到数据的处理以及组件之间的通信时会比较复杂。 对于大型的复杂应用来说，这两方面恰恰是最关键的。因此，只用 React，写大型应用比较吃力 不使用 Redux ： 只能使用父子组件通讯、状态提升等 React 自带机制 ...