React中无需useEffect，如何基于本地导入数据实现动态路由？

不需要使用useEffect，你的问题主要出在路由配置或子组件数据获取方式上，以下是具体解决步骤：

1. 先确认路由配置是否正确 #

首先要在路由表中定义对应动态路径的规则，比如你用item.title作为路径，就要配置/:title；如果用item.id（更推荐，避免特殊字符问题），就配置/item/:id。

示例路由配置：

import { Routes, Route } from 'react-router-dom';
import Parent from './Parent';
import Child from './Child';

function App() {
  return (
    <Routes>
      <Route path="/" element={<Parent />} />
      {/* 配置动态路由，这里以id为例 */}
      <Route path="/item/:id" element={<Child />} />
    </Routes>
  );
}

2. 父组件NavLink的正确写法 #

你的原有写法没问题，但建议用id作为路径参数（避免title含特殊字符导致路由失效），同时保留state传递数据：

import { NavLink } from 'react-router-dom';
import localData from './your-data-file';

function Parent() {
  return (
    <div>
      {localData.map(item => (
        <NavLink 
          to={{ 
            path: `/item/${item.id}`, 
            state: { item: item } 
          }} 
          key={item.id}
        >
          <div>{item.title}</div>
        </NavLink>
      ))}
    </div>
  );
}

3. 子组件获取数据的两种方式 #

方式一：通过useLocation获取state传递的数据 #

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

function Child() {
  const location = useLocation();
  const item = location.state?.item;

  if (!item) {
    return <div>数据不存在</div>;
  }

  return (
    <div>
      <h2>{item.title}</h2>
      <p>{item.description}</p>
    </div>
  );
}

注意：这种方式刷新页面后，state会丢失，因为state存在内存中，不是URL的一部分。

方式二：通过useParams+本地数据匹配（推荐，刷新不丢数据） #

如果不想依赖state，可以通过URL中的id参数，直接从本地数据中匹配对应的项：

import { useParams } from 'react-router-dom';
import localData from './your-data-file';

function Child() {
  const { id } = useParams();
  // 注意转换id的类型，因为URL参数是字符串
  const item = localData.find(item => item.id === Number(id));

  if (!item) {
    return <div>找不到该条目</div>;
  }

  return (
    <div>
      <h2>{item.title}</h2>
      <p>{item.description}</p>
    </div>
  );
}

常见问题排查 #

• 你之前的代码没生效，大概率是路由没配置对应的动态路径，比如你写了/${item.title}，但路由表中没有/:title的规则，导致跳转后找不到对应的子组件。
• 如果用title作为路径参数，要确保title没有空格、中文或特殊字符，否则会导致路由解析错误，建议优先用id。

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