React博客项目中Redux结合CreateBrowserRouter遇无错不渲染问题

核心问题1：App组件未返回JSX #

你的App组件定义里没有通过return返回JSX内容，组件不会渲染任何元素，这是页面空白的直接原因。

核心问题2：React Router Loader用法错误 #

Loader函数的作用是在组件渲染前获取数据，你当前的写法只是修改了loader的参数对象，既没有发起API请求，也没有正确传递数据。而且直接通过store.getState()获取数据不符合两者的协作逻辑，应该在loader里发起API请求并dispatch Redux action，或在组件内通过useSelector获取Redux state。

问题3：无效的空Route #

/posts路由下的空<Route />无实际作用，会导致路由匹配异常，需要移除。

修正后的代码示例 #

第一步：修复App组件的返回逻辑 #

export default function App() {
  return (
    <Provider store={store}>
      <RouterProvider router={getRouter(store)} />
    </Provider>
  )
}

第二步：正确实现Loader与Redux的协作 #

假设你已有获取帖子的action creator，在loader中发起请求并同步到Redux：

import { fetchPosts } from './features/posts/postsSlice';

const getRouter = (store) => {
  return (
    createBrowserRouter(
      createRoutesFromElements(
        <Route path="/" element={<Layout />}>
          <Route
            index
            element={<PostList />}
            errorElement={<Error />}
            loader={async () => {
              // 发起API请求并dispatch到Redux
              await store.dispatch(fetchPosts()).unwrap();
              // 返回的数据可通过useLoaderData在组件中获取，也可直接从Redux读取
              return store.getState().posts;
            }}
          />
          <Route path='/posts' element={<PostForm />} />
          <Route path="*" element={<NotFound />} />
        </Route>
      )
    )
  )
}

第三步：在PostList组件中获取数据 #

在组件中可选择从Redux或loader获取数据：

import { useSelector } from 'react-redux';
// 或 import { useLoaderData } from 'react-router-dom';

function PostList() {
  // 方式1：从Redux获取
  const posts = useSelector(state => state.posts);
  // 方式2：从loader返回值获取
  // const posts = useLoaderData();

  return (
    <div>
      {posts.map(post => (
        <div key={post.id}>{post.title}</div>
      ))}
    </div>
  )
}

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