如何优化React组件结构，实现页面分离并正确访问数据？

项目背景 #

我正在开发一个React论坛项目，包含两个组件：Board.js和Message.js：

• Board 作为主页，展示对应板块下的所有话题列表。我用useState定义了空数组topic，绑定在表单上的addTopic函数负责创建话题——它会保存输入值，向topic数组添加新对象，之后数组内容会被映射渲染到页面。
• Message 组件用于用户点击话题后查看消息详情。

Board组件包含了数组创建、话题生成的全部逻辑，返回由多个div和表格组成的布局JSX；Message组件仅返回用于页面美化的div结构JSX。

问题描述 #

访问Board.js时，Board组件会堆叠在Message组件上方显示，没法作为独立页面分开展示。我知道问题出在文件结构/路由配置上，现在只有两个组件，没法正确传递props。复制项目尝试优化结构，但始终跑不起来。作为React新手，我在文件结构这块需要提升，虽然看过YouTube基础视频，但还是解决不了。

Board.js #

const [topic, setTopic] = useState(() => {
    const topicJson = localStorage.getItem("topic");
    return topicJson ? JSON.parse(topicJson) : [];
  });

const [title, setTitle] = useState();
const [message, setMessage] = useState();

const [show, setShow] = useState(false);

const handleTitle = (e) => setTitle(e.target.value);
const handleMessage = (e) => setMessage(e.target.value);

const addTopic = (e) => {
    e.preventDefault();

    const updatedTopic = [
      ...topic,
      {
        title: title,
        message: message,
      },
    ];

    setTopic(updatedTopic);
  };

return (
// CSS已移除以提升可读性，实际是一堆div和表格

{topic
  .filter((x) => x.board === id)
  .map(
     (
      { /* 对象属性 */ }, index
     ) => (
      // 表格JSX代码
     ))}

{show ? (
  <form onSubmit={addTopic}>
    Write your topic
    <label htmlFor="title">
       <input
         id="title"
         name="title"
         value={title}
         onChange={handleTitle}
      ></input>
   </label>
   Write your message
   <label htmlFor="message">
     <textarea
       id="message"
       name="message"
       value={message}
       onChange={handleMessage}
   ></textarea>
  </label>
  <button type="submit">
   Post Message
  </button>
</form>
) : null}

<MessageDetail topic={topic} />
)

Message.js #

const Message = (props) => {
  const { id } = useParams();

  return (
    <span>{props.message}</span>
  );
};

解决方案 #

1. 配置React Router实现页面路由 #

要让两个组件成为独立页面，必须用React Router做路由管理：

• 先安装依赖：npm install react-router-dom
• 在项目入口文件（比如App.js）中配置路由：

import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
import Board from './Board';
import Message from './Message';

function App() {
  return (
    <Router>
      <Routes>
        {/* 主页路由，对应Board组件 */}
        <Route path="/" element={<Board />} />
        {/* 消息详情路由，:id是动态参数，对应话题索引 */}
        <Route path="/message/:id" element={<Message />} />
      </Routes>
    </Router>
  );
}

export default App;

2. 移除Board组件中直接渲染Message的代码 #

你现在在Board的return里直接写了<MessageDetail topic={topic} />，这是导致组件堆叠的核心原因。改成点击话题跳转到详情页：
在Board的map渲染部分，给每个话题添加跳转链接：

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

// ...其他代码
{topic
  .filter((x) => x.board === id)
  .map((topicItem, index) => (
    <tr key={index}>
      <td>
        {/* 跳转到详情页，传递话题索引作为id参数 */}
        <Link to={`/message/${index}`}>{topicItem.title}</Link>
      </td>
      {/* 其他表格内容 */}
    </tr>
  ))}

同时删除return里的<MessageDetail topic={topic} />这一行。

3. 修正Message组件的数据获取逻辑 #

Message组件需要根据路由参数找到对应的话题，这里用Context共享topic数据是最合理的方案：

• 创建TopicContext共享数据：

// TopicContext.js
import { createContext, useContext, useState } from 'react';

const TopicContext = createContext();

export function TopicProvider({ children }) {
  const [topic, setTopic] = useState(() => {
    const topicJson = localStorage.getItem("topic");
    return topicJson ? JSON.parse(topicJson) : [];
  });

  return (
    <TopicContext.Provider value={{ topic, setTopic }}>
      {children}
    </TopicContext.Provider>
  );
}

export function useTopic() {
  return useContext(TopicContext);
}

• 在App.js中用Provider包裹路由：

import { TopicProvider } from './TopicContext';

function App() {
  return (
    <TopicProvider>
      <Router>
        {/* 路由内容 */}
      </Router>
    </TopicProvider>
  );
}

• 修改Board组件，用useTopic获取数据：

import { useTopic } from './TopicContext';

const Board = () => {
  const { topic, setTopic } = useTopic();
  // 其余逻辑保持不变
}

• 修改Message组件，获取对应话题：

import { useParams } from 'react-router-dom';
import { useTopic } from './TopicContext';

const Message = () => {
  const { id } = useParams();
  const { topic } = useTopic();
  const currentTopic = topic[id];

  return (
    <div>
      <h2>{currentTopic?.title}</h2>
      <p>{currentTopic?.message}</p>
    </div>
  );
};

4. 同步话题数据到localStorage #

现在你修改topic数组后没有同步到localStorage，需要在addTopic函数里补充：

const addTopic = (e) => {
  e.preventDefault();
  const updatedTopic = [
    ...topic,
    {
      title: title,
      message: message,
      board: id, // 补上board属性，不然filter逻辑无效
    },
  ];
  setTopic(updatedTopic);
  localStorage.setItem("topic", JSON.stringify(updatedTopic)); // 同步到本地存储
};

内容的提问来源于stack exchange，提问作者Dagger