يمكنك القيام بشيء ما مثل :
export default function MainRoutes() {
const [lan, setLan] = useState("en");
return (
<Router>
<Routes>
{lan === "en" && <Route path='/' element={<CompanyEn />} />}
{/* <Route path='/ar' element={ <CompanyEn /> } /> */}
{lan === "ar" && <Route path='/ar' element={<CompanyArOne />} />}
</Routes>
</Router>
);
}
وبهذه الطريقة لن يتم تحميل اي ملف من المكون العربي إلا إذا كانت اللغة عربية ولن يتم تحميل اي مكون من اللانجليزي إلا اذا كانت انجليزية.
ويمكنك اضافة الشرط لأكثر من مكون مثل :
export default function MainRoutes() {
const [lan, setLan] = useState("en");
return (
<>
{lan === "en" &&
<Routes>
<Route path='/' element={<CompanyEn />} />
<Route path='/example' element={<Example />} />
</Routes>
}{lan === "ar" &&
<Router>
<Route path='/ar' element={<CompanyArOne />} />
<Route path='/ar/example' element={<Example />} />
</Router>
}
</>
);
}