在 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?

在我的应用程序中,我有一个 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})

但这感觉不对,就像我做错了一样。实现此功能的更好方法是什么?

您可以将道具传递到 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})

你做的没问题,但这会使组件更难重用,而且如果你改变了路径,你也需要改变组件 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>