时间戳

首页 > 解决方案 > 刷新页面给出“找不到页面”。（反应浏览器路由器）

react-redux - 刷新页面给出“找不到页面”。（反应浏览器路由器）

问题描述

我用 React-Redux 构建了一个简单的 reddit 应用程序，当我转到 /posts/mlxft5 之类的帖子页面并刷新页面时，它说找不到该帖子。我不知道如何解决它。这是我在代码沙盒上的代码。这是我的 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`

标签： react-reduxreact-routerreddit

解决方案

现在，当我们在子版块的/posts页面上时，您只会从 API 请求帖子。没有由 发起的请求/posts/mlxft。我们需要添加一个额外的 thunk 操作，它可以从 id 获取和存储单个帖子。

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

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;
      }
    }
  }
);

你需要在你的 reducer 中添加额外的 case 来处理这个 thunk。注意：如果您使用构建器回调表示法而不是 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用于每个帖子而不是一个用于整个切片的帖子。我在这个答案中解释了如何做到这一点。

更新了 CodeSanbox

我还进行了一些更改，这样您就不会多次获取相同的 subreddit 帖子。

推荐阅读