在React应用程序中使用React路由器使用React路由器来获取数据是一种不正确的做法吗？

Question

在我的应用中，我有一个home页面，该页面有一个名为帖子的孩子以以下方式设置路线：

<Route path='/' element={<Home />}>
  <Route path='/posts/popular' element={<Posts />} />
  <Route path='/posts/new' element={<Posts />} />
</Route>

我想将其设置流行路径，那么我的API调用将是：

axios.get('/posts?sort=-popular')

但是，如果我在新呼叫中，则该调用是：

axios.get('/posts?sort=-createdAt')

我想实现的方式是将第二个参数变成选择器，例如：

<Route path='/' element={<Home />}>
  <Route path='/posts/:sortBy' element={<Posts />} />
</Route>

// in my Posts component I would call useParams
const {sortBy} = useParams();

// then in useEffect
axios.get(`/posts?sort=-${sortBy})

但是这让我感到沮丧，就像我做错了。实施此功能的更好方法（如果有的话）是什么？

Answer 1

您所做的是可以的，但是它将使组件更难重复使用，同样，如果您更改路径，则需要更改组件posts。最好在组件 ports 中添加新的Prop sortby，然后在ROUTE> ROUTE> ROUTE组件中传递道具。

<Route path='/' element={<Home />}>
 <Route path='/posts/popular' element={<Posts sortBy="popular" />} />
 <Route path='/posts/new' element={<Posts sortBy="new"/>} />
</Route>

Answer 2

您可以将道具传递到route> ROUTE> ROUTE>中的＆lt; posts/＆gt;组件中。

这是一个示例：

<Route path='/' element={<Home />}>
  <Route path='/posts/popular' element={<Posts sort="popular" />} />
  <Route path='/posts/new' element={<Posts sort="createdAt" />} />
</Route>

然后在帖子内部您可以使用道具来确定要进行的呼叫：

const Props = ({ sort }) => {

// then in useEffect
axios.get(`/posts?sort=-${sort})