在 React 应用程序中使用 URL params 作为使用 React Router 获取数据的方式是不正确的做法吗？

Question

在我的应用程序中，我有一个 Home 页面，其中有一个名为 Posts 的子项，路由按以下方式设置：

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

我想设置它，如果我在 popular 路径上，那么我的 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

您可以将道具传递到 Route 中的 <Posts /> 组件。

这是一个例子：

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

然后在 Posts 中，您可以使用 prop 来确定进行哪个调用：

const Props = ({ sort }) => {

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

Answer 2

你做的没问题，但这会使组件更难重用，而且如果你改变了路径，你也需要改变组件 Posts。最好在你的组件 Posts 中添加一个新的道具 sortBy 并在你的 Route 组件中传递道具。

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

在 React 应用程序中使用 URL params 作为使用 React Router 获取数据的方式是不正确的做法吗？

Is it an incorrect practice to use URL params as a way to fetch data using react router in an react application?

javascript

reactjs

express

axios

url-parameters