Блог

Я изучаю контекст и у меня есть маршрут : /показать/:идентификатор

У меня есть контекст, и я хочу получить доступ к идентификатору параметров /show/:id внутри него. Чтобы получить то, что я хочу, я просто установил состояние в пустую строку в своем контексте и использовал ее в /show/:id для установки идентификатора с помощью параметров использования.

Это работает так, как я хочу, но мне интересно, есть ли лучший способ достичь того, чего я хочу, и получить более чистый код.

мой app.js выглядит так :

   <Route exact path="/discover" component={Discover} />
   <ShowDetailsProvider>
      // here I want :id in "showDetailsProvider"
     <Route exact path="/show/:id" component={ShowDetails} />
   </ShowDetailsProvider>
 <Route exact path="/show/episode/:id" component={ShowEpisode} />
 

мой ShowDetailsContext-это :

 import { createContext, useState } from "react";

const ShowDetailsContext = createContext();

const ShowDetailsProvider = ({ children }) => {
  const [idSerie, setIdSerie] = useState("");

  console.log(idSerie);

  return <ShowDetailsContext.Provider value={{ setIdSerie }}>{children}</ShowDetailsContext.Provider>;
};

export { ShowDetailsProvider, ShowDetailsContext };
 

И мой ShowDetails.js

 import React, { useContext } from "react";
import { useParams } from "react-router-dom";
import { ShowDetailsContext } from "../context/ShowDetailsContext";

const ShowDetails = () => {
  const showDetailsContext = useContext(ShowDetailsContext);
  const { id } = useParams();
  showDetailsContext.setIdSerie(id);

  return (
    <>
      <p>show detail page</p>
    </>
  );
};

export default ShowDetails;

 

Я думаю, что это довольно чисто, просто и читабельно. Единственный комментарий, который у меня есть, — почему вы фиксируете идентификатор в контексте? Предполагая, что у вас есть другие варианты его использования, в противном случае помещение его в контекст является своего рода циклом.