m0_56986233的博客

React-router6路由表+嵌套路由详解

导入hooks，导入你封装的http模块，引入样式import React, { useEffect, useState } from 'react'import {http} from '@/API/'import './index.scss'默认导出一个函数组价，并使用hooks对数据进行渲染 const [askList,setAskLike] = useState([]) useEffect(()=>{ const getAskList = async ()=>

1.在component下新建一个gradRoute.js的文件，并输入如下内容import { getToken } from "../API";import { Navigate } from 'react-router-dom'export default function GardRoute({ children }) { //获取token const isToken = getToken() if (isToken) { //如果有token，那就去往该组件包裹的页面

1.新建一个API文件夹，下面新增一个token.js文件，内容如下//定义key值const key = 'pc-key'//存tokenconst storeToken = (token) => { return window.localStorage.setItem(key,token)}//取tokenconst getToken = () => { return window.localStorage.getItem(key)}//清空tokenconst

实现步骤安装修改 CRA 配置的包：yarn add -D @craco/craco在项目根目录中创建 craco 的配置文件：craco.config.js，并在配置文件中配置路径别名修改 package.json 中的脚本命令在代码中，就可以通过 @ 来表示 src 目录的绝对路径重启项目，让配置生效代码实现craco.config.jsconst path = require('path')module.exports = { // webpack 配置 webpack

1. 安装mobx相关工具yarn add mobx mobx-react-lite2.1 若不进行统一管理，直接使用mbox（后面会说统一管理）新建一个store.js文件夹，下面新建一个count.js文件//引入import { makeAutoObservable } from "mobx";class Counter{ count = 0 constructor() { //定义this makeAutoObservable(this) } addCo

1.引入useNavigateimport React, { useState } from 'react'import { Link,Outlet,useNavigate } from 'react-router-dom'2.在函数内定义一个数接受改值，并定义传值内容 const targetByBtn = useNavigate() const [message] = useState([ { id: '001', title: '消息1', content: '哈哈' },

1.只要在根组件引用了路由就不用再子组件再次引用了（!!!切记）2.嵌套路由import { Navigate } from 'react-router-dom'import Home from '../pages/Home'import Message from '../pages/Message'import News from '../pages/News'const indexRouter = [ { path: '/home', element: <Hom

1.下载6版本的react-router-dom yarn add react-router-dom2.引入import { NavLink, useRoutes} from 'react-router-dom'3.创建路由表//在src目录下建立一个文件夹routes，在该目录下新建一个index.js，随后写下自己需要的路由组件import { Navigate } from 'react-router-dom'import Home from '../pages/Home'impo

1.引入context，并解构出来import React, { Component } from 'react'const NameContext = React.createContext()//Provider是给类组件 Consumer是类函数都可以 使用const { Provider, Consumer } = NameContext2.定义一个Statestate = { username: 'tom', age: 18 }3.将你需要传递给子孙组件的值用Provider包

1.params父传参import React, { Component } from 'react'import Detail from "./Detail/";import { Link, Switch,Route } from 'react-router-dom';export default class Message extends Component { state = { MessageArr: [ { id: '01', title: '消息1' },

1.下载React路由 yarn add react-router-dom@5 //本次讲解的是react 5版本的路由2.导入import { BrowserRouter, Link, Route, NavLink, Switch, Redirect } from 'react-router-dom'//这里的路由组件很多 我一个一个说2.1BrowserRouter//BrowserRouter：对比与vue的History 在react中咱们需要把他包裹index.js中render