react实例与总结(二)

news/2025/2/21 8:01:09

目录

一、脚手架基础语法(16~17)

1.1、hello react

1.2、组件样式隔离(样式模块化)

1.3、react插件

二、React Router v5

2.1、react-router-dom相关API

2.1.1、内置组件

2.1.1.1、BrowserRouter

2.1.1.2、HashRouter

2.1.1.3、Route

2.1.1.4、Redirect

2.1.1.5、Link

2.1.1.6、NavLink

2.1.1.7、Switch

2.1.2、其它

2.1.2.1、history对象

2.1.2.2、match对象

2.1.2.3、withRouter对象

2.2、向路由组件传参

2.2.1、传递params参数

2.2.2、传递search参数

2.2.3、传递state参数

2.3、编程式路由导航跳转

三、React Router v6

3.1、一级路由

3.2、重定向

3.3、NavLink高亮

3.4、useRoutes

3.5、嵌套路由

3.6、路由传参

3.6.1、params

3.6.2、search

3.6.3、state

3.7、编程式路由导航

3.8、use拓展

四、V6 pk V5

一、脚手架基础语法(16~17)

1.1、hello react

1.2、组件样式隔离(样式模块化)

已知：vue2通过scoped来防止组件样式冲突

react解决方法：样式模块化(CSS Modules)

使用方法：
1、将 CSS 文件命名为 [name].module.css。
2、在组件中导入样式模块，并使用对象属性访问样式类名。

javascript">import "./hello.css";//直接引入
import styles from "./hello.module.css";//样式模块化
<h2 className={styles.title}>hello react！</h2>

补充：Styled Components、Emotion、Shadow DOM 和 CSS 命名空间等方案也可以。

1.3、react插件

VScode插件搜索react：ES7+ React/Redux/React-Native snippets

输入rcc：类组件   rfc：函数组件回车即可

更多快捷代码块：vscode-react-javascript-snippets/docs/Snippets.md at 185bb91a0b692c54136663464e8225872c434637 · r5n-labs/vscode-react-javascript-snippets · GitHub

二、React Router v5

1、SPA：单页面应用

      (1)、点击页面中的链接不会刷新页面，只做页面的局部刷新

      (2)、数据都通过ajax请求获取，并在前端异步展现

2、路由：一个路由就是一个映射关系(key:value)

      key为路径,value可能是function【后端路由】或component【前端路由】

      前端：当浏览器的path变为/XX时，当前路由组件就会变为XX组件，依赖浏览器的 hash 或 history API来管理 URL 状态。

2.1、react-router-dom相关API

下载：npm i react-router-dom@5

路由组件和一般组件接收的props不同，前者会接收到三个history、location、match固定属性。

2.1.1、内置组件

javascript">import { BrowserRouter as Router, Route, Switch, Redirect,Link } from 'react-router-dom'
export default class App extends Component {
    render() {
        return (
            <div>
                <Router>
{/* Switch虽然在v5版本不是必须的，但是基本都会用到，只让页面匹配上一个，不能匹配上多个 */}
                    <Switch>
<Route path='/' exact render={() => <Redirect to='/index'></Redirect>}></Route>
<Route path='/index' render={(props) => {
//想要进入到主页，如果此时还未登录就重定向到登录页，如果已经登陆了就进入首页
                            if (isLogin()) {
// Home组件并不是路由组件，render的函数式组件才是真正的路由组件，需要把props的内容传到Home组件中。
                                return <Home {...props}></Home>
                            } else {
                                return <Redirect to='/login'></Redirect>
                            }
}}></Route>
<Route path='/login' render={(props) => {
                            if (isLogin()) {
                                return <Redirect to='/index/home'></Redirect>
                            } else {
                                return <Login {...props}></Login>
                            }
}}></Route>
                    </Switch>
     <div className="left-side">
          <Link to="/about">About</Link>
          <Link to="/home">Home</Link>
     </div>
     <div className="right-content">
          <Route path="/about" component={About}></Route>
          <Route path="/home" component={Home}></Route>
     </div>
                </Router>
            </div>
        )
    }
}
2.1.1.1、BrowserRouter

使用 HTML5 history API 来保持URL 路径不带 #，适合现代 Web 应用

2.1.1.2、HashRouter

使用 # 来管理 URL，适合不支持HTML5 history API的老版本浏览器,刷新后会导致路由参数丢失

2.1.1.3、Route

<Route> ：用于定义路径和对应组件的基本单元

<Route path="/home" component={<Home />} />
2.1.1.4、Redirect

重定向：<Redirect to='/index'></Redirect>

2.1.1.5、Link

它是React Router提供的用于页面跳转的组件，类似于HTML的<a>标签，但不会引起页面刷新

2.1.1.6、NavLink

特殊的<Link>，添加了活动样式(activeClassName)，通过this.props.children获取标签体内容

<NavLink to="/home" activeClassName="active">Go to Home</NavLink>
2.1.1.7、Switch

只让页面匹配上一个，不能匹配上多个，提高路由匹配效率

拓展：

        路由默认使用模糊匹配，如果开启严格匹配【exact={true}】的话，有时会导致无法继续匹配二级路由，不要随便开启。

2.1.2、其它

2.1.2.1、history对象

管理浏览器的会话历史。例如推送新的路径、替换当前路径和返回上一页等处理导航的方法。

javascript"> const history = useHistory();
  const handleNavigation = () => {
    history.push('/new-path'); // 导航到新的路径
  };
2.1.2.2、match对象

包含了与当前路由匹配的信息，它通常在路由组件中作为 props 传递。

javascript">const User = ({ match }) => {
  return <div>User ID: {match.params.userId}</div>;
};
const App = () => (
  <Route path="/users/:userId" component={User} />
);
2.1.2.3、withRouter对象

高阶组件，用于将history、location 和match对象作为props传递给包装的组件，将一般组件加工，让其具备路由组件所特有的API。

javascript">const MyComponent = ({ history, location, match }) => {
  const handleNavigation = () => {
    history.push('/new-path'); // 导航到新的路径
  };
  return (
    <div>
      <h1>Current Path: {location.pathname}</h1>
      <button onClick={handleNavigation}>Go to New Path</button>
    </div>
  );
};
export default withRouter(MyComponent);

类组件应用路由跳转：

javascript">import React from 'react';
import { withRouter } from 'react-router-dom';
class MyComponent extends React.Component {
  handleNavigate = () => {
    const { history } = this.props;
    history.push('/new-route');
  };
  render() {
    return (
      <div>
        <button onClick={this.handleNavigate}>Go to New Route</button>
      </div>
    );
  }
}
export default withRouter(MyComponent);

2.2、向路由组件传参

2.2.1、传递params参数

类组件 ：

函数组件：

javascript">const User = ({ match }) => {
  const { userId } = match.params;
  return <div>User ID: {userId}</div>;
};

2.2.2、传递search参数

类组件 ：

函数组件：

javascript">import { useLocation } from 'react-router-dom';
const User = () => {
  const location = useLocation();
  const searchParams = new URLSearchParams(location.search);
  const name = searchParams.get('name');
  const age = searchParams.get('age');
  return (
    <div>
      <p>Name: {name}</p>
      <p>Age: {age}</p>
    </div>
  );
};

2.2.3、传递state参数

类组件：

函数组件：

javascript">import { useLocation } from 'react-router-dom';
const User = () => {
  const location = useLocation();
  const { id,title } = location.state || {};
  return (
    <div>
      <p>From Dashboard: {id}---{title}</p>
    </div>
  );
};

总结：

1、params：通过路由路径传递参数，使用match.params接收。
2、search：通过查询字符串传递参数，使用location.search和qs.parse【基于类组件】、location.search和URLSearchParams【基于函数组件】接收。
3、state：通过history.push或Link的to属性传递任意对象，使用location.state接收。

补充：useHistory、useLocation、useParams等Hook在React 16.8之后才可用,并通过withRouterHOC进行路由的高阶组件包装。

2.3、编程式路由导航跳转

函数组件：

javascript">import React from 'react';
import { useHistory } from 'react-router-dom';
const MyComponent = () => {
  const history = useHistory(); // 获取 history 对象
  const handleNavigate = () => {
    history.push('/new-route');
  };
  return (
    <div>
      <button onClick={handleNavigate}>Go to New Route</button>
    </div>
  );
};
export default MyComponent;

类组件：

javascript"><button onClick={() => this.pushShow(item.id, item.title)}>push查看</button>
<button onClick={() => this.replaceShow(item.id, item.title)}>replace查看</button>
replaceShow = (id, title) => {
    this.props.history.replace(`/homes/message/detail/${id}/${title}`);
    this.props.history.replace(`/homes/message/detail/?id=${id}/title=${title}`);
    this.props.history.replace(`/homes/message/detail`,{id,title});
  };
pushShow = (id, title) => {
    this.props.history.push(`/homes/message/detail/${id}/${title}`);
    this.props.history.push(`/homes/message/detail/?id=${id}/title=${title}`);
    this.props.history.push(`/homes/message/detail`,{id,title});
  };

三、React Router v6

下载：npm i react-router-dom@6

3.1、一级路由

Routes：它用来包裹所有的<Route>，并且确保只渲染匹配的第一个 <Route>

javascript"><Routes>
  <Route path="/" element={<Home />} />
  <Route path="/about" element={<About />} />
</Routes>

3.2、重定向

javascript"><Route path="/" element={<Navigate to="/about" />}></Route>

3.3、NavLink高亮

javascript">function computedClassName({ isActive }) {
		return isActive ? "list-item active" : "list-item";
}
<NavLink className={computedClassName} to="/about">About</NavLink>
<NavLink className={computedClassName} to="/homes">Home</NavLink>

3.4、useRoutes

3.5、嵌套路由

<Outlet />是一个占位符组件，用来渲染匹配的子路由的内容，父路由通常会渲染一个包含 <Outlet /> 的组件，这样它就可以根据当前的 URL 渲染子路由对应的组件。

3.6、路由传参

3.6.1、params

javascript"><Route path="/user/:id" element={<UserProfile />} />
// UserProfile 组件中接收 params 参数
import { useParams } from 'react-router-dom';
const UserProfile = () => {
  const { id } = useParams();
  return <div>User ID: {id}</div>;
};

3.6.2、search

javascript">	const [searchParams] = useSearchParams();
	const q = searchParams.get("q"); // 获取查询参数 'q'
	const page = searchParams.get("page"); // 获取查询参数 'page'
	return (
		<div>
			<h1>搜索结果</h1>
			<p>查询关键词：{q}</p>
			<p>当前页码：{page}</p>
		</div>
	);
javascript"><Link to="/search?keyword=react">搜索React</Link>
// 在组件中接收查询参数
import { useLocation } from 'react-router-dom';
const Search = () => {
  const location = useLocation();
  const query = new URLSearchParams(location.search);
  const keyword = query.get("keyword");
  return <div>搜索关键词：{keyword}</div>;
};

3.6.3、state

javascript"><Link to={{ pathname: '/detail', state: { id: 1, name: 'React' } }}>详情</Link>
// 在目标组件中接收 state 参数
import { useLocation } from 'react-router-dom';
const Detail = () => {
  const location = useLocation();
  const { id, name } = location.state || {};
  return (
    <div>
      <p>ID：{id}----------名称：{name}</p>
    </div>
  );
};

总结：

1、params：通过路由路径传递参数，使用useParams钩子接收。
2、search：通过查询字符串传递参数，使用useSearchParams或者useLocation和URLSearchParams解析。
3、state：通过Link或useNavigate传递状态参数，使用useLocation.state 来接收。

3.7、编程式路由导航

javascript"> const navigate = useNavigate();
  const handleClick = () => {
    // 导航到 "/about" 页面，state参数写在对象里，params与search参数之间写url里
    navigate('/about', { state: { fromDashboard: true } });
  };

3.8、use拓展

useInRouterContext：检查组件是否在路由上下文中。
useNavigationType：获取当前导航类型（POP、PUSH、REPLACE）。
useOutlet：在父路由中渲染子路由的元素。
useResolvedPath：解析路径并返回路径对象

四、V6 pk V5

V6相比V5,进行了以下改动：

1、Routes代替了Switch、Navigate代替了Redirect；
2、useNavigate代替了useHistory，新增useParams、useLocation等，官方推荐函数组件。
3、路由匹配变得更精确，支持嵌套路由和动态路由的定义。
4、Route 组件的 API 也发生了改变，不再需要 component 或 render 属性，使用element 属性来传递渲染的组件。

若项目使用的是React 16.3 ~16.7，只能使用React Router v5。
若项目使用的是 React 16.8 或更高版本，可以选择React Router v5或React Router v6，但建议使用v6，因为它包含了最新的功能和更简洁的 API。


http://www.niftyadmin.cn/n/5860502.html

相关文章

IC卡、M1卡及各类卡的原理使用说明

IC卡、M1卡及各类卡的原理使用说明

1. M1卡 1.1 M1卡说明 请参考&#xff1a;https://blog.csdn.net/dancehole/article/details/126868829 1.2 M1卡测试 M1卡的0扇区是只读扇区&#xff0c;我们可以测试下读写&#xff0c;我们向0扇区写入数据&#xff0c;返回失败&#xff0c;读取数据&#xff0c;数据如下…
阅读更多...
详解Nginx 配置

详解Nginx 配置

一、Nginx 介绍 Nginx 是一款轻量级的 Web 服务器 / 反向代理服务器及电子邮件&#xff08;IMAP/POP3&#xff09;代理服务器。它由俄罗斯的程序设计师 Igor Sysoev 所开发&#xff0c;自 2004 年发布以来&#xff0c;凭借其高性能、低内存消耗、高并发处理能力等特点&#xf…
阅读更多...
k8s ssl 漏洞修复

k8s ssl 漏洞修复

针对Kubernetes集群中SSL/TLS协议信息泄露漏洞&#xff08;CVE-2016-2183&#xff09;的修复&#xff0c;需重点修改涉及弱加密算法的组件配置。以下是具体修复步骤及验证方法&#xff1a; 一、漏洞修复步骤 1. 修复etcd服务 修改配置文件 &#xff1a; 编辑 /etc/kubernetes/…
阅读更多...
爱普生 SG-8101CE 可编程晶振在笔记本电脑的应用

爱普生 SG-8101CE 可编程晶振在笔记本电脑的应用

在笔记本电脑的精密架构中&#xff0c;每一个微小的元件都如同精密仪器中的齿轮&#xff0c;虽小却对整体性能起着关键作用。如今的笔记本电脑早已不再局限于简单的办公用途&#xff0c;其功能愈发丰富多样。从日常轻松的文字处理、网页浏览&#xff0c;到专业领域中对图形处理…
阅读更多...
Android 11.0 WiFi连接默认设置静态IP地址功能实现

Android 11.0 WiFi连接默认设置静态IP地址功能实现

1.前言 在11.0的系统rom定制化开发中，在定制化某些功能开发中，在wifi模块中，有产品需要要求设置wifi静态ip功能，而系统中wifi连接 后ip是动态的，每次开机后 连接wifi的ip就是不固定的，所以产品需要采用固定ip，就需要实现静态ip功能 2.WiFi连接默认设置静态IP地址功能实…
阅读更多...
DeepSeek动画视频全攻略：从架构到本地部署

DeepSeek动画视频全攻略：从架构到本地部署

DeepSeek 本身并不直接生成动画视频，而是通过与一系列先进的 AI 工具和传统软件协作，完成动画视频的制作任务。这一独特的架构模式，使得 DeepSeek 在动画视频创作领域发挥着不可或缺的辅助作用。其核心流程主要包括脚本生成、画面设计、视频合成与后期处理这几个关键环节。 …
阅读更多...
Golang学习笔记_36——装饰器模式

Golang学习笔记_36——装饰器模式

Golang学习笔记_33——桥接模式 Golang学习笔记_34——组合模式 Golang学习笔记_35——代理模式 文章目录 一、核心概念1. 定义2. 解决的问题3. 核心角色4. 类图 二、特点分析三、适用场景1. 流处理系统2. GUI组件增强3. 中间件开发 四、代码示例&#xff08;Go语言&#xff09…
阅读更多...
ESP32系列芯片模组方案，设备物联网无线通信，智能化交互响应控制

ESP32系列芯片模组方案，设备物联网无线通信，智能化交互响应控制

在物联网技术飞速发展的今天&#xff0c;芯片模组作为设备连接与智能交互的核心&#xff0c;发挥着至关重要的作用。 ESP32系列芯片模组&#xff0c;凭借其卓越的性能、丰富的功能以及广泛的适用性&#xff0c;在多个领域实现了令人瞩目的落地应用。 ESP32系列芯片模组是一系…
阅读更多...
最新文章

Copyright @ 2022~2023