刷新页面显示“找不到页面”。 （反应浏览器路由器）

Question

我使用 React-Redux 构建了一个简单的 reddit 应用程序，当我转到像 /posts/mlxft5 这样的帖子页面并刷新页面时，它说找不到该帖子。我不知道如何修复它。这是我在 codeandbox 上的 code。 这是我的 app.js 代码

function App() {
  return (
    <Router > 
      <div className="App">
      <div className="App-navbar">
        <SubredditsList />
      </div>
        <Switch>
          <Route  exact path="/" component={StartMessage}/>
          <Route  exact path="/search" component={SearchPostsList}/>
          <Route exact path="/posts" component={PostsList} />
          <Route  path="/posts/:postId" component={PostDetailRender}/>
          <Route  path="/search/:postId" component={SingleSearchPostRender}/>
          <Redirect to="/" />
        </Switch>
      </div>
    </Router>
  )
}

export default App`

Answer 1

现在，您只是在我们位于 /posts 页面上的 subreddit 页面上请求来自 API 的帖子。 /posts/mlxft 没有发起任何请求。我们需要添加一个额外的 thunk 操作，它可以从 id 中获取和存储单个帖子。

当我们点击 /posts 页面上的列表中的单个帖子时，我们不想获取 Redux 中已有的帖子。如果数据已经存在，我们将使用 createAsyncThunk 函数的 condition setting 有条件地取消提取。

export const fetchSinglePost = createAsyncThunk(
  "posts/fetchSingle",
  async (postId) => {
    const response = await fetch(
      `https://api.reddit.com/api/info/?id=t3_${postId}`
    );
    const json = await response.json();
    return json.data.children[0].data;
  },
  {
    condition: (postId, { getState }) => {
      const { posts } = getState();
      if (posts.entities[postId]) {
        return false;
      }
    }
  }
);

你需要在你的减速器中添加额外的案例来处理这个 thunk。注意：如果您使用 builder callback notation 而不是 reducer 映射对象表示法，那么您可以将两个“被拒绝”的情况结合起来。

[fetchSinglePost.pending]: (state, action) => {
  state.status = "loading";
},
[fetchSinglePost.fulfilled]: (state, action) => {
  state.status = "succeeded";
  postsAdapter.upsertOne(state, action.payload);
},
[fetchSinglePost.rejected]: (state, action) => {
  state.status = "failed";
  state.error = action.error.message;
}

在您的 PostDetailRender 组件中，您需要dispatch fetchSinglePost 操作。可以在所有情况下分派它，因为 thunk 本身会取消获取。

useEffect(() => {
  dispatch(fetchSinglePost(postId));
}, [dispatch, postId]);

您可能会为每个帖子设置一个 status，而不是为整个切片设置一个。我在 this answer 中解释了如何做到这一点。

Updated CodeSanbox

我还做了一些更改，以免您多次获取同一个 subreddit 的帖子。