React路由跳转URL正确但页面空白问题求助

问题核心原因 #

1. 路由路径定义错误：从Board组件的columns.map可以看出，columns是一个数组，但App.jsx中直接访问columns.id会得到undefined，导致路由路径被设置为无效值，无法匹配/todo这类具体的列路径，最终没有组件渲染，页面空白。
2. Props传递不匹配：即使路由能匹配，App.jsx中给Columns组件传递的是columnId属性，但Columns组件接收的是id属性，会导致id参数为undefined，过滤任务时逻辑出错，组件渲染失败。

修复方案 #

修改App.jsx代码，调整路由定义并正确传递参数：

import { useParams } from 'react-router-dom';
import { useContext } from 'react';
import DataContext from './你的DataContext路径';

// 新增页面组件，负责获取路由参数并匹配对应列数据
const ColumnPage = () => {
  const { columnId } = useParams();
  const { columns } = useContext(DataContext);
  
  // 根据路由参数找到对应列
  const targetColumn = columns.find(col => col.id === columnId);
  
  // 处理列不存在的情况
  if (!targetColumn) {
    return <div>该列不存在</div>;
  }
  
  // 正确传递Columns组件需要的props
  return <Columns id={targetColumn.id} title={targetColumn.title} />;
};

function App() {
  return (
    <DataProvider>
      <Routes>
        <Route path="/" element={<Board />} />
        {/* 定义动态路由，匹配所有/[列ID]格式的路径 */}
        <Route path="/:columnId" element={<ColumnPage />} />
      </Routes>
    </DataProvider>
  );
}

export default App;

修复说明 #

• 改用动态路由/:columnId，可以匹配所有/todo、/in-progress这类单列路径；
• 通过ColumnPage组件获取路由参数，从Context中找到对应列的数据，确保传递给Columns组件的id和title参数正确；
• 移除了原App.jsx中直接在Routes内使用Context Consumer的不合理写法，避免数组数据导致的路由定义错误；
• 增加了列不存在的兜底处理，避免异常情况。

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