En mi aplicación, tengo una página Home que tiene un elemento secundario llamado Posts , las rutas están configuradas de la siguiente manera:
<Route path='/' element={<Home />}> <Route path='/posts/popular' element={<Posts />} /> <Route path='/posts/new' element={<Posts />} /> </Route> Me gustaría configurarlo donde, si estoy en el camino popular , mi llamada API será:
axios.get('/posts?sort=-popular')Pero si estoy en nuevo, entonces la llamada sería:
axios.get('/posts?sort=-createdAt')La forma en que estaba pensando en implementarlo era convertir el segundo parámetro en un selector como:
<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})Pero esto se siente mal, como si lo estuviera haciendo mal. ¿Cuál es una mejor manera, si la hay, de implementar esta funcionalidad?
Puede pasar accesorios al componente <Posts /> en su Route .
Aquí hay un ejemplo:
<Route path='/' element={<Home />}> <Route path='/posts/popular' element={<Posts sort="popular" />} /> <Route path='/posts/new' element={<Posts sort="createdAt" />} /> </Route> Luego, dentro de Posts , puede usar el accesorio para determinar qué llamada realizar:
const Props = ({ sort }) => { // then in useEffect axios.get(`/posts?sort=-${sort})Lo que hizo está bien, pero hará que el componente sea más difícil de reutilizar, además, si cambió la ruta, deberá cambiar también las Posts del componente. Es mejor agregar un nuevo accesorio sortBy dentro de las publicaciones de su Posts y pasar el accesorio dentro de su componente Route .
<Route path='/' element={<Home />}> <Route path='/posts/popular' element={<Posts sortBy="popular" />} /> <Route path='/posts/new' element={<Posts sortBy="new"/>} /> </Route>