React中的路由跳转及传参

一、安装与基础配置

1. 安装React Router v6

   npm install react-router-dom
   

2. 配置路由

   import { BrowserRouter, Routes, Route } from 'react-router-dom';
   
   function App() {
     return (
       <BrowserRouter>
         <Routes>
           <Route path="/" element={<Home />} />
           <Route path="/user/:id" element={<User />} />
           <Route path="/search" element={<SearchPage />} />
         </Routes>
       </BrowserRouter>
     );
   }
   

---

二、路由跳转方式

1. 使用 <Link> 组件跳转

import { Link } from 'react-router-dom';

function Home() {
  return (
    <div>
      <Link to="/user/123">跳转到用户123</Link>
      <Link to="/search?name=john">搜索John</Link>
    </div>
  );
}

2. 编程式导航：useNavigate

1. 参数传递规范：

   • navigate(to, options)
   • to 参数：仅接受路径相关属性（pathname, search, hash）
   • options 参数：控制导航行为（state, replace 等）

options常用的配置选项：

• replace：是否替换当前页面的历史记录；
• state：传递的状态数据；
• shoudlNavigate：是否允许进行路由跳转；

import { useNavigate } from 'react-router-dom';

function Home() {
  const navigate = useNavigate();

  return (
    <button onClick={() => navigate('/user/456')}>
      跳转到用户456
    </button>
  );
}

---

三、参数传递方式

1. URL参数（动态路由）

• 传递参数：

  <Link to="/user/789">用户789</Link>
  // 或
  navigate('/user/789');
  

• 获取参数：

  import { useParams } from 'react-router-dom';
  
  function User() {
    const { id } = useParams(); // id = "789"
    return <div>用户ID: {id}</div>;
  }
  

2. 查询参数（Query Parameters）

• 传递参数：

  <Link to="/search?name=john&age=25">搜索</Link>
  // 或
  navigate('/search?name=john&age=25');
  

• 获取参数：

  import { useSearchParams } from 'react-router-dom';
  
  function SearchPage() {
    const [searchParams] = useSearchParams();
    const name = searchParams.get('name'); // "john"
    const age = searchParams.get('age');   // "25"
    return <div>搜索条件：{name}, {age}</div>;
  }
  

3. 状态参数（State）

• 传递参数：

  <Link to="/details" state={{ from: 'home', data: { id: 1 } }}>详情</Link>
  // 或
  navigate('/details', { state: { from: 'home', data: { id: 1 } } });
  

• 获取参数：

  import { useLocation } from 'react-router-dom';
  
  function Details() {
    const location = useLocation();
    const { from, data } = location.state || {};
    return <div>来自：{from}, 数据ID：{data?.id}</div>;
  }
  

---

四、关键注意事项

1. 动态路由参数需在路由配置中定义（如path="/user/:id"）。

2. 查询参数不会在路由配置中显式声明，通过?key=value传递。

3. State参数不会暴露在URL中，适合敏感数据，但页面刷新后会丢失。

4. 处理未定义参数：使用可选链操作符（?.）或默认值避免错误。

   const { id } = useParams() || {};
   const name = searchParams.get('name') || '未知';
   const stateData = location.state?.data || {};
   

---

五、完整示例

// App.js
import { BrowserRouter, Routes, Route } from 'react-router-dom';
import Home from './Home';
import User from './User';
import SearchPage from './SearchPage';
import Details from './Details';

function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/user/:id" element={<User />} />
        <Route path="/search" element={<SearchPage />} />
        <Route path="/details" element={<Details />} />
      </Routes>
    </BrowserRouter>
  );
}

// Home.js
import { Link, useNavigate } from 'react-router-dom';

function Home() {
  const navigate = useNavigate();

  return (
    <div>
      <Link to="/user/123">用户123（URL参数）</Link>
      <button onClick={() => navigate('/search?name=john')}>
        搜索John（查询参数）
      </button>
      <button onClick={() => navigate('/details', { state: { data: '秘密信息' } })}>
        查看详情（State参数）
      </button>
    </div>
  );
}

// User.js
import { useParams } from 'react-router-dom';

function User() {
  const { id } = useParams();
  return <div>用户ID: {id}</div>;
}

// SearchPage.js
import { useSearchParams } from 'react-router-dom';

function SearchPage() {
  const [searchParams] = useSearchParams();
  const name = searchParams.get('name');
  return <div>搜索名称: {name}</div>;
}

// Details.js
import { useLocation } from 'react-router-dom';

function Details() {
  const location = useLocation();
  const data = location.state?.data;
  return <div>接收到的State数据: {data}</div>;
}

---

六、总结

• URL参数：适合必要标识（如资源ID）。
• 查询参数：适合可选过滤条件（如搜索、分页）。
• State参数：适合敏感或临时数据（如表单提交后的状态）。
• 编程式导航：useNavigate 提供灵活跳转（如提交后跳转）。
• 安全性：避免在URL中传递敏感信息（如密码）。