React Router v6中如何传递Props？页面空白问题求助

警告翻译 #

匹配到路径"/"的叶子路由没有设置有效element属性，这意味着它默认会渲染一个值为null的<Outlet />，最终导致页面空白。

问题原因 #

你使用的是React Router v6及以上版本，该版本的Route组件element属性要求直接传入React元素（JSX），而不是返回元素的函数。你的写法不符合API规范，导致路由无法正确识别渲染内容，从而出现空白页。

正确实现方式 #

如果目标是向<Home />组件传递数据，直接在element中传入带props的JSX即可：

<Route
  exact
  path="/"
  element={<Home contacts={contacts} getContactId={removeContactHandler} />}
/>

如果你的代码实际要渲染的是<ContactList />（可能是笔误），修正写法如下：

<Route
  exact
  path="/"
  element={<ContactList contacts={contacts} getContactId={removeContactHandler} />}
/>

补充说明 #

如果组件需要路由相关的参数（如路径参数、location对象等），无需通过Route传递，直接在组件内部使用React Router提供的hooks：

• 获取路径参数：useParams()
• 获取location对象：useLocation()
• 获取导航方法：useNavigate()

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