ReactJs：如何在启动时选择性地加载反应功能组件？

Question

我试图仅在单击时加载组件，而不是在启动期间全部加载。

index.js：

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

App.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;

我的每个提供程序组件都在对端点进行 get 调用以获取组件的数据

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>
  );
};

当我在http://localhost:3000/ 上浏览我网站的根目录时，我希望只加载组件 D，但是当我查看浏览器网络调用时，我看到所有四个组件的 get 调用，而不是只加载路线，我如何有选择地加载组件？我已经尝试过 react-loadable 和 React.Lazy 但它仍然会进行所有四个调用。非常感谢任何帮助。

Answer 1

调用所有 Provider 的原因是您没有在 Route 中渲染它们。在特定路由上调用组件的正确方法是将它们呈现为 Route 子级而不是 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;