ReactJs : 如何在启动时有选择地加载反应功能组件?

Question

我尝试仅在单击时加载组件，而不是在启动期间加载所有组件。

索引.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;

我的每个提供程序组件都在对终结点进行 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，但是当我查看浏览器网络调用时，我看到收到所有四个组件的调用，而不仅仅是加载路由的组件， 如何有选择地加载组件？我已经尝试了react-loadable和React.Lazy，但它仍然进行了所有四个调用。任何帮助将不胜感激。

Answer 1

调用所有提供程序的原因是您没有在路由中呈现它们。在特定路由上调用组件的正确方法是将它们呈现为 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;