ReactJs: Как выборочно загружать реагирующие функциональные компоненты при запуске? - PullRequest
Новая
       6

ReactJs: Как выборочно загружать реагирующие функциональные компоненты при запуске?

0 голосов
/ 17 июня 2020

Я пытаюсь загружать компоненты только при нажатии, а не загружать все во время запуска.

index. js: 

ReactDOM.render(
  <BrowserRouter>
    <App />
  </BrowserRouter>,
  document.getElementById("root")
);

Приложение . js: 

    const App = (props) => {
      return (
     <React.Fragment> 
        <AProvider>
           <Route exact path="/A" component={A} />
         <AProvider>
          <BProvider>
            <Route exact path="/B" component={B} />
          </BProvider>
          <CProvider>
            <Route exact path="/C" component={C} />
          </CProvider>
          <DProvider>
            <Route exact path="/" component={D} />
          </DProvider>
    </React.Fragment>
      )};
     export default App;

Каждый компонент моего поставщика выполняет вызов конечной точки для получения данных для компонента 

export const AContext = React.createContext();
export const AProvider = (props) => {
  const [A, setA] = useState([]);
  useEffect(() => {
    async function getA() {
      try {
        const result = await axios.get(http://localhost/a", {
          params: {
            id: 1,
          },
        });
        setA(result.data);
      } catch (e) {
        console.log(e);
      }
    }
    getA();
  }, []);
  return (
    <AContext.Provider value={[A, setA]}>
      {props.children}
    </AContext.Provider>
  );
};

Когда я просматриваю root моего сайта на http://localhost: 3000 / , я ожидаю загрузить только компонент D, но когда я смотрю на сетевые вызовы браузера, я вижу, что получаю вызовы для всех четырех компонентов, а не только загружаю компонент маршрута, как выборочно загружать компоненты? Я пробовал react-loadable и React.Lazy, но он по-прежнему выполняет все четыре вызова. Любая помощь приветствуется.

1 Ответ

1 голос
/ 17 июня 2020

Причина, по которой вызываются все Провайдеры, заключается в том, что вы не отображаете их в Маршруте. Правильный способ вызвать компоненты на определенных c маршрутах - это отобразить их как дочерние элементы Route, а не как оболочки 

const App = (props) => {
  return (
     <React.Fragment> 
           <Route exact path="/A" render={(rp) => <AProvider><A {...rp} /></AProvider>} />
            <Route exact path="/B" render={(rp) => <BProvider><B {...rp} /></BProvider>} / />
            <Route exact path="/C" render={(rp) => <CProvider><C {...rp} /></CProvider>} / />
            <Route exact path="/" render={(rp) => <DProvider><D {...rp} /></DProvider>} / />
    </React.Fragment>
  )
};
export default App;
...