面试题：React 跨路由数据共享之中等难度：Context 方式的应用

Question

在 React 应用中，使用 Context 实现跨路由数据共享，请描述具体步骤并给出一个简单示例代码，示例需包含至少两个不同路由组件间的数据传递。

Answer 1

具体步骤

1. 创建 Context：使用 createContext 方法创建一个 Context 对象。
2. 提供数据：在应用的合适层级（通常是较高层级组件）使用 Context.Provider 来包裹需要共享数据的组件树，并通过 value 属性传递共享数据。
3. 消费数据：在需要使用共享数据的组件中，使用 Context.Consumer 或者 useContext Hook 来获取共享数据。

示例代码

1. 首先安装 React Router 相关依赖：

npm install react-router-dom

2. 创建 Context：

import React from 'react';

// 创建 Context
const MyContext = React.createContext();

export default MyContext;

3. 配置路由及共享数据：

import React from 'react';
import { BrowserRouter as Router, Routes, Route } from'react-router-dom';
import MyContext from './MyContext';
import ComponentA from './ComponentA';
import ComponentB from './ComponentB';

function App() {
  const sharedData = {
    message: '这是共享数据'
  };
  return (
    <Router>
      <MyContext.Provider value={sharedData}>
        <Routes>
          <Route path="/a" element={<ComponentA />} />
          <Route path="/b" element={<ComponentB />} />
        </Routes>
      </MyContext.Provider>
    </Router>
  );
}

export default App;

4. 组件 A 获取共享数据：

import React from'react';
import MyContext from './MyContext';

function ComponentA() {
  const contextData = React.useContext(MyContext);
  return (
    <div>
      <h1>Component A</h1>
      <p>{contextData.message}</p>
    </div>
  );
}

export default ComponentA;

5. 组件 B 获取共享数据：

import React from'react';
import MyContext from './MyContext';

function ComponentB() {
  const contextData = React.useContext(MyContext);
  return (
    <div>
      <h1>Component B</h1>
      <p>{contextData.message}</p>
    </div>
  );
}

export default ComponentB;