技术标签: react.js 前端 react技术栈及全家桶 javascript
1.路由组件
(1-1) v6 方式一 react-router-dom 常规
(1-2) v6 方式二 react-router-dom 使用 useRoutes
2.页面跳转
(2-1) Link 组件跳转
(2-2) useNavigate hooks跳转,代替useHistory
3.获取路由的参数
(3-1) useParams 获取动态路由的值
(3-2) useSearchParams 获取查询字符串的值
(3-3) useLocation 获取上一个页面传递进来的 state 参数 v5、v6一样
v6 较 v5版本,在常用的路由组件管理、页面跳转、页面跳转带参等功能使用,需要注意。
官网:https://reactrouter.com/docs/en/v6
//自己选一个,几种方式都可以
npm方式:
npm install --save react-router-dom
cnpm方式:
cnpm install --save react-router-dom
yarn方式:
yarn add react-router-dom
指定版本:使用@
yarn add react-router-dom@5.2.1
见:package.json文件内dependencies新增了react-router-dom的版本号,即安装成功
重启下项目(不需要install)
BrowserRouter:引用不变
Routes:替换 v5 的 Switch 组件
Route:引用不变。参数 element 替换 v5 的 component、render 组件
(1-1) 创建 src/routers/index.js
import Home from '../views/Home';
import About from '../views/About'
import Err404 from '../views/Err404'
const routers = [
{
title: '首页',
path: '/',
component: Home,
},
{
title: '关于',
path: '/inbox',
component: About,
},
{
title: '404',
path: '/inbox',
component: Err404,
}
];
export default routers;
(1-2) 调用
v6 方式一 react-router-dom 常规(推荐 - 可以设置title更方便)
// v6 方式一
import React from 'react';
import {
BrowserRouter as Router, Routes, Route } from 'react-router-dom';
import routers from './routers';
const App = () => {
return (
<Router>
<Routes> // 不是老版本的:Switch
{
routers.map((item, index) => {
return (
<Route
key={
index}
exact
path={
item.path}
element={
<item.component />} // 不是老版本的:component 或 render
// onEnter、onBeforeMount、onMounted事件,会在组件初始化时执行一次,切换路由不执行
// 若 修改 document.title 查看文档:https://blog.csdn.net/weixin_44461275/article/details/122843160
/>
);
})}
</Routes>
</Router>
);
};
export default App;
//v5
import React from 'react';
import {
BrowserRouter as Router, Switch, Route } from 'react-router-dom';
import routers from './routers';
const App = () => {
return (
<Router>
<Switch>
{
routers.map((item, index) => {
return (
<Route
key={
index}
exact
path={
item.path}
render={
() => {
// 推荐使用 render 不用 component
document.title = item.title;
return <item.component />;
}}
//或:
//component={<item.component />}
/>
);
})}
</Switch>
</Router>
);
};
export default App;
v6 方式二 react-router-dom + 使用 useRoutes
//路由json组件
import Layout from '../layout'
import About from '../views/About'
import Home from '../views/Home'
import AboutIndex from '../views/About/Component/AboutIndex'
import AboutList from '../views/About/Component/AboutList'
import Error404 from '../views/Error404'
const routes = [
{
path: "/",
element: <Layout />,
children: [
{
index : true,
element: <Home />
},
{
path: "/about",
element: <About />,
children: [
{
index : true, element: <AboutIndex />},
{
path : "/about/:id", element :<AboutList />}
]
},
]
},
{
path: "*",
element: <Error404 />,
}
]
export default routes
//app.js
import React from 'react';
import {
BrowserRouter as Router, useRoutes } from 'react-router-dom';
import routers from '../routers';
function App() {
const GetRoutes = () => useRoutes(routers); //一定要是函数内
return (
<Router>
<GetRoutes />
</Router>
);
}
export default App;
(2-1) Link 组件跳转
import React from "react";
import {
Link } from "react-router-dom";
function DEMO() {
return (
<Link to="/aaa">点击跳转页面</Link>
);
}
export default DEMO;
(2-2) useNavigate hooks跳转,代替useHistory
import React from "react";
import {
useNavigate } from "react-router-dom";
function DEMO() {
const navigate = useNavigate();
// 点击跳转页面
function hrefAaa() {
navigate('/aaa')
}
// history replace模式
function hrefReplace() {
navigate("/aaa", {
replace: true });
}
// history.go(-1)
function historyBack() {
navigate(-1);
}
// 跳转带参数
function hrefState() {
navigate("/test", {
state: {
test: 111 },
});
}
return (
<>
<div onClick={
hrefAaa}>点击跳转页面</div>
<div onClick={
hrefReplace}>history replace模式</div>
<div onClick={
historyBack}>返回上一个页面</div>
</>
);
}
export default DEMO;
import React,{
useEffect } from "react";
import {
useParams, useSearchParams, useLocation } from "react-router-dom";
export default function GoodsDetail() {
const params = useParams(); // 获取动态路由的值
const [searchParams, setSearchParams] = useSearchParams(); // 获取查询字符串的值
const location = useLocation(); // 获取上一个页面传递进来的 state 参数
useEffect(() => {
// 一个对象,key 为动态字符串的 key
console.log(params); // {id: '123'}
console.log(location.state); // { test: 111 } 上一个页面带参获取 非url上面的search
// 输入 http://localhost:3000/goods/123?name=1111
console.log(searchParams.get("name")); // 111
}, []);
const handleSetSearch = () => {
// 新增-修改
setSearchParams({
keyName: 2222
}); // /aaa?keyName=2222
};
return (
<div onClick={
handleSetSearch}>Page</div>
);
}
文章浏览阅读1.7k次,点赞3次,收藏7次。虚拟机如何在net模式下进行联网(centos7)1.首先你需要先将虚拟机安装好,如果不会可以参考[centos7安装教程](https://blog.csdn.net/qq_44714603/article/details/88829423?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522161949204316780274178621%2522%252C%2522scm%2522%253A%252220140713.130102334…_虚拟机net网络
文章浏览阅读6.5w次,点赞59次,收藏241次。range()函数:用于生成一个整数序列;range()的三种创建方式:第一种:只有一个参数(小括号中只给了一个数)即range(stop)例如:range(10)指的是默认从0开始,步长为1,不包括10;注意:的运行结果为:;要想输出0-9的数字序列则应该是的结果为;第二种:range(start,stop) (给了两个参数,即小括号中给了两个数)r=range(1,10) print(list(r)) 运行结果为:;第三种:range(start,stop,step):._python range函数
文章浏览阅读2.5k次。数据的四种基本存储方法,(1)顺序存储方法(2)链接存储方法(3)索引存储方法(4)散列存储方法_数据存储
文章浏览阅读6.7k次。一、Mysql启用SSL配置1.检查mysql是否支持ssl在linux端用root账号进入mysql命令行界面,查看当前版本mysql数据库是否支持ssl,如果出现以下结果表示支持,如果没有考虑更换版本,或者编译一个带有SSL版本的mysqlshell>show variables like ‘%ssl%’;2.设置用户是否使用ssl连接1.查看用户是否使用SSL连接she..._jdbc mysql ssl
文章浏览阅读612次。java jwt使用,springboot 整合java-jwt,java jwt工具类================================Copyright 蕃薯耀2020-12-03https://www.cnblogs.com/fanshuyao/一、引入java-jwt的maven依赖<dependency> <groupId>..._jwtproperties
文章浏览阅读753次,点赞21次,收藏15次。列出现有主题,创建主题,该主题包含一个分区,该分区为Leader分区,它没有Follower分区副本。启动成功,可以看到控制台输出的最后一行的started状态:此时kafka安装成功。查看zookeeper状态,zookeeper启动成功,再启动kafka。onsole-producer.sh用于生产消息**开启消费者和生产者,生产并消费消息。开启消费者和生产者,生产并消费消息。在Zookeeper中的根节点路径。创建主题,该主题包含多个分区。的地址,此处使用本地启动的。查看指定主题的详细信息。
文章浏览阅读188次。蜗居在珠海的小厂魅族,虽然是“小厂”,但是其一路走来的历史,一直被科技圈津津乐道,而深入简出的带头大哥黄章,更是魅友的精神领袖。魅族是一个很低调的企业,但是却有这样一种魅力,总能有意无意的成为新闻的主角,比如近日知名科技大V中国IT杂谈发布了这样一条微博:魅族正在适配麒麟820和鸿蒙系统,未来还要加入华为系。关于这条信息的真实性后面再说,我们先来讨论下华为和魅族是否真的可以成为CP,共同走向人生巅..._鸿蒙420支持麒麟820吗
文章浏览阅读306次。GoLand live template自定义模板失效问题解决_live template 在jsp中不生效
文章浏览阅读603次。如果用 GPIO 作为外部中断,需要配置 AFIO,来选择是哪个端口,可以是 GPIOA/GPIOB/GPIOC/GPIOD/GPIOE/GPIOF/GPIOG,需要注意的是,对于同一个 Pin 脚,只能选择配置一个端口,例如我配置 Pin15 为 GPIOC,那么就不能再用用 GPIOA/B/D/E/F/G 15 作为 EXTI ,如下图所示。②Edge Detect :边缘检测,可以是上升沿触发,也可以是下降沿触发,还可以是上升沿和下降沿都可以分别触发,对应图中 ②-1 和 ②-2。_stm32f103的exti16连接到 事件,exti17连接到 事件,exti18连接到 事件。stm32f
文章浏览阅读9.2w次,点赞109次,收藏364次。conda环境中使用conda命令安装cuda、cudnn、tensorflow(-gpu)、pytorch_conda安装cudnn
文章浏览阅读346次,点赞6次,收藏8次。字符串中只含有括号 (),[],,{},判断输入的字符串中括号是否匹配。如果括号有互相包含的形式,从内到外必须是,(),[],{},例如。输入: [()] 输出:YES,而输入([]), ([])都应该输出NO。文件的第一行为一个整数n(0
文章浏览阅读689次。color、text-开头的、line-开头的,font-开头的这些关于文字样式的,都可以继承;所有的盒子的、定位的、布局属性都不能继承。多个选择器同时作用在同一个元素上时候,看权重,那个高,最后显示那个,优先级从高到低分别是:先比较ID选择器数量,在比较类选择器数量,最后比较标签选择器数量最后显示的绿色,因为ID选择器数量优先级高,所以以2为准了,如果都一样,谁写在后面,谁的生效。如果不能直接选中某个元素权重是0,如通过继承而来的权重是0,开始数权重之前一定要看看是不是真的选中文字所在的最内层的标签,没选_css继承与层叠