v6路由嵌套组件数据传递踩坑：props传递方式变化

在React Router v6的升级过程中，路由嵌套组件的数据传递方式发生了显著变化，这给开发者带来了不少困扰。

问题现象

在v5版本中，我们可以通过props直接传递数据到子路由组件中。但在v6中，由于Route组件不再直接支持props属性，传统的传递方式失效了。

复现步骤

1. 创建一个父路由组件和子路由组件
2. 在父组件中尝试通过<Route path="child" component={ChildComponent} props={{data: 'test'}} />传递数据
3. 你会发现ChildComponent无法接收到props数据

解决方案

方案一：使用useParams和useLocation Hook

// 父组件
function Parent() {
  return (
    <div>
      <Routes>
        <Route path="child" element={<Child />} />
      </Routes>
    </div>
  );
}

// 子组件
function Child() {
  const location = useLocation();
  const data = location.state?.data || 'default';
  return <div>{data}</div>;
}

方案二：使用React Context

const DataContext = createContext();

function App() {
  const [data, setData] = useState('test');
  
  return (
    <DataContext.Provider value={{data, setData}}>
      <Routes>
        <Route path="child" element={<Child />} />
      </Routes>
    </DataContext.Provider>
  );
}

function Child() {
  const {data} = useContext(DataContext);
  return <div>{data}</div>;
}

最佳实践

建议在v6中优先使用React Router提供的Hook和Context结合的方式，避免直接依赖props传递数据，这样可以更好地适应路由的现代化设计模式。