Tengo dos páginas Page1 y Page2. Necesito establecer condicionalmente uno o el otro como página de inicio en función de una condición. También necesito asegurarme de que todas las direcciones URL tengan un prefijo de identificación. Toma lo siguiente
<Routes> <Route path={`/${id}`} element={condition ? <Page1 /> : <Page2>} /> <Route path={`/:id/page1`} element={<Page1 />} /> <Route path={`/:id/page2`} element={<Page2 />} /> <Route path="/" element={id ? <Navigate replace to={`/${id}`} /> : <Navigate replace to={`/`} />} /> } /> </Routes>Esto establece la URL de la página de inicio en '/123' y redirige a '/123' si el usuario ingresa '/'. También tengo una condición en la primera ruta que configura dinámicamente el componente para renderizar.
Mi problema es que si la 'condición' devuelve una promesa, entonces la página 2 se configura primero y cuando la condición se resuelve cambia a la página 1. ¿Hay una mejor manera de hacer esto?
Puede crear un componente de ruta de diseño que represente en "/:id" y condicionalmente represente un indicador de carga o similar mientras se verifica la condición. Cuando la propiedad de la condition no está definida inicialmente, HomePageLayout muestra un indicador de carga, y cuando Promise resuelve y actualiza el estado de la condition a cualquier otra cosa que no sea undefined , se muestra un Outlet para las rutas anidadas.
Ejemplo:
const HomePageLayout = ({ condition }) => { if (condition === undefined) { return <LoadingSpinner />; } return condition ? <Outlet /> : }; Utilice una ruta de índice para representar los Page1 de la Page2 o de la página 2. La ruta de índice se representa exactamente cuando la ruta es igual a la de su ruta principal.
const [condition, setCondition] = useState(); // <-- initially undefined useEffect(() => { getCondition() .then(result => setCondition(!!result)); }, []); ... <Routes> <Route path="/:id" element={<HomePageLayout {...{ condition }} />}> <Route index element={condition ? <Page1 /> : <Page2>} /> <Route path="page1" element={<Page1 />} /> <Route path="page2" element={<Page2 />} /> </Route> <Route path="/" element={<Navigate replace to={id ? `/${id}` : "/"} />} /> </Routes>necesita crear dos rutas diferentes con una ruta diferente y desde la página de inicio escribe la condición en la que se redirigirá la página
Home Page <Link to={true ? '/page1' : '/page2' }/> Routes <Route path="/page1" element={<Page1 />} /> <Route path="/page2" element={<Page2 />} />