React-Router-Dom v6无法渲染Home组件问题求助

你的代码存在两处不符合React Router V6规范的问题，导致Home组件无法正常渲染：

1. Route组件属性使用错误 #

React Router V6彻底移除了Route组件的component属性，需要替换为element属性，并且必须传入JSX元素而非组件引用。同时，NotFound页面需要指定path="*"来匹配所有未定义的路由。

修改App.js中的Routes部分：

<Routes>
  <Route path="/" element={<Home />}/>
  <Route path="/r/:id" element={<Subreddit />}/>
  <Route path="/search/:id" element={<SearchResults />}/>
  <Route path="*" element={<NotFoundPage />} />
</Routes>

2. 路由参数获取方式变更 #

React Router V6不再通过props向路由组件传递match、location等对象，必须使用对应的hooks获取路由相关数据。Home组件对应根路径（/），本身没有路由参数，你代码中通过match.params.id取值的逻辑需要调整。

修改Home.js：

import React, { useEffect } from "react";
import { useParams } from "react-router-dom"; // 新增导入
// 其他导入保持不变

const Home = () => { // 移除props中的match参数
  const dispatch = useDispatch();
  const posts = useSelector(selectPosts);
  const isLoading = useSelector(selectIsLoading);
  const error = useSelector(selectError);
  // 根路径无id参数，直接设置为空值
  const currentSubreddit = "";

  useEffect(() => {
    dispatch(setCurrentFilter("hot"));
    dispatch(setCurrentSubreddit(""));
    dispatch(loadPostsHot());
  }, [dispatch, currentSubreddit]);

  // 其余渲染逻辑保持不变
};

export default Home;

如果需要在其他带参数的路由组件（比如Subreddit）中获取参数，使用useParams()钩子即可：

const { id } = useParams();

完成以上修改后，Home组件即可正常渲染。

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