<think>根据用户需求，需要在React 18中实现从Login页面到Article页面的
路由传参和接收参数。我们将提供5个示例，包括：
1.
查询参数
传参（声明式导航）
2.
查询参数
传参（编程式导航）
3. 动态
路由传参（声明式导航）
4. 动态
路由传参（编程式导航）
5. 状态变量
传参（编程式导航）
注意：状态变量
传参通常用于编程式导航，声明式导航通常使用Link组件，但状态变量在声明式导航中也可以通过state传递，但这里我们按用户要求分别提供。
我们将使用react-router-dom v6（与React 18兼容的版本）来实现。
### 前提条件
- 已经安装react-router-dom（版本6以上）
-
路由配置已完成
###
路由配置调整
为了支持动态
路由，我们需要在
路由配置中定义动态参数。例如，动态
路由传参需要将
路由路径设置为`/article/:id`。
修改`src/router/index.js`（或类似的
路由配置文件）：
```javascript
import { createBrowserRouter } from 'react-router-dom';
import Login from '../page/login';
import Article from '../page/article';
const router = createBrowserRouter([
{
path: '/login',
element: <Login />
},
{
path: '/article/:id', // 动态
路由参数
element: <Article />
},
// 可以再配置一个固定路径的article用于非动态
路由传参的情况，但为了示例清晰，我们统一用动态
路由配置，其他
传参方式不依赖于动态路径
// 注意：实际项目中可以根据需要配置多个
路由
]);
export default router;
```
### 示例1：
查询参数
传参（声明式导航）
在Login页面中使用`Link`组件传递
查询参数。
**Login页面（发送参数）**：
```jsx
import { Link } from 'react-router-dom';
function Login() {
return (
<div>
<h1>Login Page</h1>
{/*
查询参数
传参（声明式导航） */}
<Link to="/article?id=1001&name=张三&age=18">
跳转到Article（
查询参数）</Link>
</div>
);
}
```
**Article页面（接收参数）**：
```jsx
import { useLocation } from 'react-router-dom';
function Article() {
// 使用useLocation获取
查询字符串
const location = useLocation();
// 使用URLSearchParams解析
查询字符串
const queryParams = new URLSearchParams(location.search);
const id = queryParams.get('id'); // 注意：这里我们传的是id，但也可以传name和age
const name = queryParams.get('name');
const age = queryParams.get('age');
return (
<div>
<h1>Article Page</h1>
<p>接收到的
查询参数：id={id}, name={name}, age={age}</p>
</div>
);
}
```
### 示例2：
查询参数
传参（编程式导航）
在Login页面中使用`useNavigate`钩子进行编程式导航，传递
查询参数。
**Login页面（发送参数）**：
```jsx
import { useNavigate } from 'react-router-dom';
function Login() {
const navigate = useNavigate();
const handleClick = () => {
// 编程式导航传递
查询参数
navigate('/article?name=张三&age=18');
};
return (
<div>
<h1>Login Page</h1>
<button onClick={handleClick}>
跳转到Article（
查询参数编程式）</button>
</div>
);
}
```
**Article页面（接收参数）**：
同示例1，使用`useLocation`和`URLSearchParams`解析。
### 示例3：动态
路由传参（声明式导航）
在Login页面中使用`Link`组件传递动态
路由参数（id=1001）。
**Login页面（发送参数）**：
```jsx
import { Link } from 'react-router-dom';
function Login() {
return (
<div>
<h1>Login Page</h1>
{/* 动态
路由传参（声明式导航） */}
<Link to="/article/1001">
跳转到Article（动态
路由）</Link>
</div>
);
}
```
**Article页面（接收参数）**：
```jsx
import { useParams } from 'react-router-dom';
function Article() {
// 使用useParams获取动态
路由参数
const params = useParams();
const id = params.id; // 因为
路由路径是/article/:id，所以这里取id
return (
<div>
<h1>Article Page</h1>
<p>接收到的动态
路由参数：id={id}</p>
</div>
);
}
```
### 示例4：动态
路由传参（编程式导航）
在Login页面中使用`useNavigate`钩子进行编程式导航，传递动态
路由参数。
**Login页面（发送参数）**：
```jsx
import { useNavigate } from 'react-router-dom';
function Login() {
const navigate = useNavigate();
const handleClick = () => {
// 编程式导航传递动态
路由参数
navigate('/article/1001');
};
return (
<div>
<h1>Login Page</h1>
<button onClick={handleClick}>
跳转到Article（动态
路由编程式）</button>
</div>
);
}
```
**Article页面（接收参数）**：
同示例3，使用`useParams`。
### 示例5：状态变量
传参（编程式导航）
在Login页面中使用`useNavigate`钩子进行编程式导航，传递state（状态对象）。注意：声明式导航也可以传递state，但这里按用户要求只展示编程式导航。
**Login页面（发送参数）**：
```jsx
import { useNavigate } from 'react-router-dom';
function Login() {
const navigate = useNavigate();
const handleClick = () => {
// 编程式导航传递状态变量
navigate('/article', {
state: {
name: '张三',
age: 18,
id: 1001 // 注意：这里我们没有使用动态
路由，所以需要配置一个非动态的
路由路径/article
}
});
};
return (
<div>
<h1>Login Page</h1>
<button onClick={handleClick}>
跳转到Article（状态变量编程式）</button>
</div>
);
}
```
**Article页面（接收参数）**：
```jsx
import { useLocation } from 'react-router-dom';
function Article() {
// 使用useLocation获取状态
const location = useLocation();
// 从location.state中获取传递的状态
const { name, age, id } = location.state || {};
return (
<div>
<h1>Article Page</h1>
<p>接收到的状态参数：name={name}, age={age}, id={id}</p>
</div>
);
}
```
### 注意事项
1. **状态变量
传参的
路由配置**：在状态变量
传参示例中，我们
跳转的
路由路径是`/article`，而不是动态
路由`/article/:id`。因此在
路由配置中，我们需要有一个匹配`/article`的
路由。如果同时需要动态
路由和固定路径，可以考虑配置两个
路由规则，或者使用可选参数（例如`/article/:id?`），但需要调整
路由配置。
2. **
路由配置调整**：为了支持上述所有示例，
路由配置需要同时支持`/article`（用于状态变量
传参和
查询参数
传参）和`/article/:id`（用于动态
路由传参）。因此，我们可以修改
路由配置如下：
```javascript
const router = createBrowserRouter([
{
path: '/login',
element: <Login />
},
{
// 可以匹配/article/1001这样的路径，也可以匹配/article?name=张三
path: '/article/:id?', // 使用可选参数，这样/article和/article/1001都可以匹配
element: <Article />
}
]);
```
这样，无论是访问`/article`还是`/article/1001`，都会渲染Article组件，然后在组件内根据
传参方式的不同选择不同的方法获取参数。
3. **接收参数的兼容处理**：在Article组件中，我们需要同时处理多种
传参方式（
查询参数、动态
路由参数、状态参数）。我们可以这样修改Article组件：
```jsx
import { useParams, useLocation } from 'react-router-dom';
function Article() {
// 获取动态
路由参数
const params = useParams();
// 获取
查询字符串
const location = useLocation();
const queryParams = new URLSearchParams(location.search);
// 获取状态
const state = location.state;
// 优先从动态
路由中获取id
const idFromParams = params.id;
// 从
查询参数中获取name和age
const nameFromQuery = queryParams.get('name');
const ageFromQuery = queryParams.get('age');
// 从状态中获取
数据
const { name: nameFromState, age: ageFromState, id: idFromState } = state || {};
// 最终显示时，我们可以根据
传参方式显示不同的参数来源
// 实际项目中，可以根据需要确定优先级，比如状态参数优先级最高等
return (
<div>
<h1>Article Page</h1>
{idFromParams && <p>动态
路由参数id: {idFromParams}</p>}
{nameFromQuery && <p>
查询参数: name={nameFromQuery}, age={ageFromQuery}</p>}
{state && <p>状态参数: name={nameFromState}, age={ageFromState}, id={idFromState}</p>}
</div>
);
}
```
但请注意，每个示例中我们只使用了一种
传参方式，所以上述兼容处理只是为了演示。实际开发中，可以根据具体情况选择合适的
传参方式。
### 小结
我们提供了5个示例，涵盖了
查询参数（声明式、编程式）、动态
路由（声明式、编程式）和状态变量（编程式）
传参。根据用户需求，每个示例都是独立的，
并且按照要求传递了指定的参数（
查询参数：name=张三&age=18；动态
路由：id=1001）。状态变量传递了三个参数（name, age, id）。
请根据实际项目结构和需求调整代码。
</think>以下是React 18中从Login页面向Article页面传递参数的5种完整实现方案，每种方案均包含发送参数（Login页）和接收参数（Article页）的完整代码：
### 1.
查询参数
传参（声明式导航）
```jsx
// Login页面 - 发送参数
import { Link } from 'react-router-dom';
function Login() {
return (
<div>
<Link to={`/article?name=${encodeURIComponent('张三')}&age=18`}>
查看文章（
查询参数）
</Link>
</div>
);
}
// Article页面 - 接收参数
import { useSearchParams } from 'react-router-dom';
function Article() {
const [searchParams] = useSearchParams();
const name = searchParams.get('name'); // 解码后自动还原中文
const age = searchParams.get('age');
return (
<div>姓名：{name}，年龄：{age}</div>
);
}
```
### 2.
查询参数
传参（编程式导航）
```jsx
// Login页面 - 发送参数
import { useNavigate } from 'react-router-dom';
function Login() {
const navigate = useNavigate();
const goToArticle = () => {
navigate(`/article?name=${encodeURIComponent('张三')}&age=18`);
};
return (
<button onClick={goToArticle}>查看文章（编程式
查询参数）</button>
);
}
// Article页面 - 接收参数（同方案1）
```
### 3. 动态
路由传参（声明式导航）
```jsx
//
路由配置（router/index.js）
{
path: '/article/:id',
element: <Article />
}
// Login页面 - 发送参数
import { Link } from 'react-router-dom';
function Login() {
return (
<Link to="/article/1001">
查看文章（动态
路由）
</Link>
);
}
// Article页面 - 接收参数
import { useParams } from 'react-router-dom';
function Article() {
const { id } = useParams();
return <div>文章ID：{id}</div>;
}
```
### 4. 动态
路由传参（编程式导航）
```jsx
// Login页面 - 发送参数
import { useNavigate } from 'react-router-dom';
function Login() {
const navigate = useNavigate();
const goToArticle = () => {
navigate('/article/1001');
};
return (
<button onClick={goToArticle}>查看文章（编程式动态
路由）</button>
);
}
// Article页面 - 接收参数（同方案3）
```
### 5. 状态变量
传参（编程式导航）
```jsx
// Login页面 - 发送参数
import { useNavigate } from 'react-router-dom';
function Login() {
const navigate = useNavigate();
const goToArticle = () => {
navigate('/article', {
state: {
user: { name: '张三', age: 18 },
articleId: 1001
}
});
};
return (
<button onClick={goToArticle}>查看文章（状态
传参）</button>
);
}
// Article页面 - 接收参数
import { useLocation } from 'react-router-dom';
function Article() {
const location = useLocation();
const { user, articleId } = location.state || {};
return (
<div>
用户：{user?.name}，年龄：{user?.age}
<br />
文章ID：{articleId}
</div>
);
}
```
### 关键实现说明：
1. **
查询参数**：使用`URLSearchParams`处理参数编码，`encodeURIComponent`确保中文正确传递
2. **动态
路由**：
-
路由配置需定义参数占位符`/article/:id`
- 使用`useParams`钩子获取参数
3. **状态变量**：
- 通过`navigate`的第二个参数传递state对象
- 使用`useLocation`在目标页获取state
- 刷新页面不会保留state（推荐用于敏感
数据）[^2][^5]
4. **中文处理**：
-
查询参数需用`encodeURIComponent`编码
- 接收时自动解码（无需手动
操作）
###
路由配置优化建议
```javascript
// router/index.js
const router = createBrowserRouter([
{
path: '/login',
element: <Login />
},
{
path: '/article/:id?', // 添加可选参数标识?
element: <Article />
}
]);
```
此配置可同时支持：
-
带参数的路径 `/article/1001`
- 无参数的路径 `/article`（用于
查询参数/状态
传参）
> 提示：状态传递最适合敏感
数据（如临时令牌），
查询参数适合公开
数据，动态
路由适合SEO友好型URL[^3][^4]。
本文详细介绍了在Vue.js中如何从一个页面跳转到另一个页面时传递参数，并在目标页面正确接收这些参数的方法。包括在组件方法中使用$router.push进行跳转并附带参数，以及在目标页面通过$route.query获取参数的具体实现。
扫一扫
1143
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
