Necesito pasar accesorios a los componentes perezosos.
const A = React.lazy(() => import("./A")); function App() { return ( <Suspense fallback={<GlobalLoader />}> <Routes> <Route path="/s/:name" element={<ValidateName />} /> <Route path="/s" element={<Page fullsize={true}><A name='default'/></Page>} /> <Route path="*" element={<Navigate replace to='/s' />} /> </Routes> </Suspense> ) } const Validatename = () => { const {name} = useParams(); let allowedValues =[{'name':a, ... },{'name':b, ... },{'name':c, ... }] let validValue = allowedValues.filter((i)=>i.name === name); let isValid = (validValue > 0); if(!isValid) return <Navigate replace to =='/s'> return <Page fullSize={true}><A name={name}/></Page> }Editar:
Problema: cómo pasar la propiedad 'nombre' en A para que se pueda cargar de forma perezosa.
No es posible en este contexto externo
En su lugar, puede usar useParams() para obtener la ruta en el componente A con carga diferida
si lo desea, puede crear un contenedor alrededor de A y llamar a useParams() aquí como sigue, sin embargo, básicamente es lo mismo.
const AWrapper= () => { const { path } = useParams(); if(path.id){ return <A prop={path.id} /> } else{ return <A props="default" /> } }; PD: también deberías cambiar A a AWrapper en Route