Estoy trabajando en una aplicación React y estoy tratando de encontrar una mejor manera de redirigir a la página 404 que no se encuentra cuando el usuario encuentra una ruta incorrecta.
Básicamente, mi aplicación tiene una barra de navegación con tres rutas principales (Inicio, Contenido, Permisos) y una redirección predeterminada para mostrar una ruta que muestra la página 404 no encontrada:
<Switch> <Route path="/home" component={Home} /> <Route path="/content" component={Content} /> <Route path="/permissions" component={Permissions} /> <Route path="/not-found" component={PageNotFound} /> <Redirect to="/not-found" /> </Switch>Mi problema es con la ruta /Permisos porque esta tiene muchas subrutas para mostrar varias páginas de configuración y necesito obtener datos con un gancho, por lo que si el usuario va a una ruta incorrecta, debe esperar a que se obtengan los datos antes de ser redirigido a la página no fundar:
const Permissions = () => { const {isFetchingData} = usePermissionsData(); if(isFetchingData) { return <Loading />; } return ( <div className={styles.permissions} > <div className={styles.leftMenu} > <LeftMenu /> </div> <div className={styles.content} > <Switch> <Route path="/permissions" component={PermissionsWelcome} <Route path="/permissions/users" component={UsersPermissions} <Route path="/permissions/content" component={ContentPermissions} <Route path="/permissions/dashboard" component={DashboardPermissions} <Redirect to="/not-found" /> </Switch> </div> </div> ); } Entonces, mi pregunta es si existe una mejor manera de redirigir al usuario a una página que no se encuentra sin tener que esperar a que se obtengan los datos. (algo que considero una pérdida de procesamiento).
¡Cualquier sugerencia es bienvenida!
"Una mejor manera" puede ser subjetivo, pero para ayudar con el problema objetivo de la necesidad de hacer coincidir una ruta antes de verificar los permisos, sugiero invertir el control. Con esto quiero decir que debe crear un componente Route personalizado que se combinará primero y luego verifique los permisos. No está claro si su fragmento de código es una versión simplificada, pero supongo que el gancho probablemente también determina si un usuario tiene permiso para acceder a la ruta/recurso actual. Si hay una verificación adicional para esto, entonces puede renderizar condicionalmente una Route con los accesorios actuales o puede renderizar una Redirect para "rebotar" al usuario fuera de la ruta, ya que le faltan los permisos requeridos.
Ejemplo:
const PermissionRoute = props => { const {isFetchingData} = usePermissionsData(); if(isFetchingData) { return <Loading />; } return <Route {...props} />; };permisos
const Permissions = () => { return ( <div className={styles.permissions} > <div className={styles.leftMenu} > <LeftMenu /> </div> <div className={styles.content} > <Switch> <PermissionRoute path="/permissions/users" component={UsersPermissions} /> <PermissionRoute path="/permissions/content" component={ContentPermissions} /> <PermissionRoute path="/permissions/dashboard" component={DashboardPermissions} /> <PermissionRoute path="/permissions" component={PermissionsWelcome} /> <Redirect to="/not-found" /> </Switch> </div> </div> ); }Enrutamiento principal
<Switch> <Route path="/home" component={Home} /> <Route path="/content" component={Content} /> <Route path="/permissions" component={Permissions} /> <Route path="/not-found" component={PageNotFound} /> <Redirect to="/not-found" /> </Switch>El enrutador de reacción se basa en la prioridad, las líneas principales/las rutas principales tienen más prioridad que otras, simplemente puede agregar una ruta con una página de reacción normal sin atributo de ruta, Ejemplo:
import React from 'react'; import { render } from 'react-dom'; import { BrowserRouter as Router, Route, Switch } from 'react-router-dom'; import Main from './Main'; // Main component import NotFound from './NotFound'; // Create a not found component const App = () => ( <Router> <Switch> <Route exact path="/" component={Main} /> <Route component={NotFound} /> // this must be placed atlast. </Switch> </Router> ); render(<App />, document.getElementById('root'));