React 向路由组件传递state参数

在 React 应用中，我们经常需要在不同的路由之间传递数据。除了使用 URL 参数或查询字符串之外，还可以通过 state 参数来传递数据。state 参数不会显示在 URL 中，因此适合传递一些敏感或复杂的数据。

1. 使用 useHistory 或 useNavigate 传递 state 参数

在 React Router v5 中，我们可以使用 useHistory hook 来导航并传递 state 参数。在 React Router v6 中，useHistory 被 useNavigate 替代。

React Router v5 示例：

import React from 'react';
import { useHistory } from 'react-router-dom';

function HomePage() {
  const history = useHistory();

  const navigateToAbout = () => {
    history.push('/about', { message: 'Hello from HomePage!' });
  };

  return (
    <div>
      <h1>Home Page</h1>
      <button onClick={navigateToAbout}>Go to About</button>
    </div>
  );
}

export default HomePage;

React Router v6 示例：

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

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

  const navigateToAbout = () => {
    navigate('/about', { state: { message: 'Hello from HomePage!' } });
  };

  return (
    <div>
      <h1>Home Page</h1>
      <button onClick={navigateToAbout}>Go to About</button>
    </div>
  );
}

export default HomePage;

2. 在目标组件中获取 state 参数

在目标组件中，我们可以使用 useLocation hook 来获取传递的 state 参数。

React Router v5 和 v6 示例：

import React from 'react';
import { useLocation } from 'react-router-dom';

function AboutPage() {
  const location = useLocation();
  const { message } = location.state || {};

  return (
    <div>
      <h1>About Page</h1>
      {message && <p>{message}</p>}
    </div>
  );
}

export default AboutPage;

3. 注意事项

• state 参数不会出现在 URL 中：这意味着如果用户刷新页面，state 参数将会丢失。因此，state 参数适合传递一些临时数据，而不是持久化的数据。
• 默认值处理：在目标组件中获取 state 参数时，建议使用默认值或条件渲染，以防止 state 为 undefined 时导致的错误。

4. 总结

通过 state 参数，我们可以在路由之间传递数据而不暴露在 URL 中。这在某些场景下非常有用，例如传递敏感信息或复杂对象。需要注意的是，state 参数在页面刷新后会丢失，因此不适合用于持久化数据。

5. 完整示例

App.js

import React from 'react';
import { BrowserRouter as Router, Route, Routes } from 'react-router-dom';
import HomePage from './HomePage';
import AboutPage from './AboutPage';

function App() {
  return (
    <Router>
      <Routes>
        <Route path="/" element={<HomePage />} />
        <Route path="/about" element={<AboutPage />} />
      </Routes>
    </Router>
  );
}

export default App;

HomePage.js

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

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

  const navigateToAbout = () => {
    navigate('/about', { state: { message: 'Hello from HomePage!' } });
  };

  return (
    <div>
      <h1>Home Page</h1>
      <button onClick={navigateToAbout}>Go to About</button>
    </div>
  );
}

export default HomePage;

AboutPage.js

import React from 'react';
import { useLocation } from 'react-router-dom';

function AboutPage() {
  const location = useLocation();
  const { message } = location.state || {};

  return (
    <div>
      <h1>About Page</h1>
      {message && <p>{message}</p>}
    </div>
  );
}

export default AboutPage;

通过以上代码，我们实现了一个简单的 React 应用，展示了如何在路由之间通过 state 参数传递数据。