Tengo una aplicación de reacción con una configuración de varios proyectos, donde el primero y el proyecto principal tienen un conjunto de rutas definidas y ya tienen algunas configuraciones de enrutadores. En mi proyecto secundario, tuve que manejar rutas desconocidas y mostrar una página 404, pero el problema aquí es que el proyecto secundario reconoce las rutas del proyecto principal como rutas desconocidas y muestra el componente de la ruta más la página 404.
En mi aplicación secundaria, tengo acceso a la lista de rutas en mi proyecto principal, entonces, ¿cómo puedo manejar eso y evitar que dos componentes se muestren en una sola página?
Parent Project - Routes - /route1 - RouteOneComponent (<Route path="/route1" component={RouteOneComponent} />) - /route2 - RouteTwoComponent (<Route path="/route2" component={RouteTwoComponent} />) - Child Project (props - parentProjectRoutes : ["/route1", "/route2"]) - /child-route-1 - ChildRouteOneComponent (<Route path="/child-route-1" component={ChildRouteOneComponent} />) - /child-route-2 - ChildRouteTwoComponent (<Route path="/child-route-2" component={ChildRouteTwoComponent} />) - * - Component404Page (<Route path="*" component={NotFoundPage} />)También intenté mover la lógica del enrutador NotFoundPage al proyecto principal, pero la situación actual de enrutamiento de mi aplicación está un poco desordenada y la única forma de resolver esto es a través del proyecto secundario.
¿Hay alguna forma de que podamos pasar alguna expresión regular a la path='*' del enrutador de modo que excluya las rutas del proyecto principal y no represente nada si la ruta está incluida en la matriz parentprojectRoutes?
Puedes escribir como:
<Route path="/:pth*"> // note that you need to pass the props to children y use el parámetro de props.match.params.pth .
O puede definir varias rutas con múltiples rutas de expresiones regulares. Por ejemplo
// this will match with urls starting with a and any numbers <Route path="/:pth(a[0-9]*)"> // this will match with urls starting with z and any numbers <Route path="/:pth(b[0-9]*)"> // then put the all matching Route <Route path="*"> Tenga en cuenta que en la nueva versión de react-router-dom@6 el orden de la ruta no es importante, solo coincide con la mejor ruta.