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