React Router tiene un buen tutorial sobre rutas anidadas .
Y es bastante fácil de crear y entender.
Sin embargo, quiero vincular una ruta a un diálogo.
Básicamente, tengo una lista de clientes en /customers y tengo un botón New en ella. Cuando se hace clic, se muestra un formulario dentro de un cuadro de diálogo. Estoy usando Material UI. Quiero cambiar la ruta a /customers/create ruta y, como resultado de ese cambio de ruta, mostrar el cuadro de diálogo. Esto significa que incluso si los usuarios presionan F5 y actualizan la página, seguirán viendo el formulario que se muestra en el cuadro de diálogo.
No puedo hacer que funcione. Creé la definición <Route /> anidada:
<Routes> <Route path='/customers' element={<Customers />}> <Route path='create' element={<CreateCustomer />} /> </Route> </Routes> Y también inserté un <Outlet /> en mi Customers.js :
import { Outlet } from 'react-router-dom' const Customers = () => { const [dialogIsShown, setDialogIsShown] = useState(false); return <div> <Button onClick={() => setDialogIsShown(true)}>Create</Button> {* customer creation component is here, inside a dialog *} <Dilog open={dialogIsShown}> <CreateCustomer /> </Dialog> {* other UI parts *} <Outlet /> </div> } Y cuando hago clic en el botón nuevo, uso useNavigate para cambiar la ruta. Pero nada pasa.
Estoy atorado aqui.
Cualquier ayuda es apreciada.
Deduje que desea hacer clic en un botón en el componente Customer para navegar a la ruta "/customers/create" y representar el componente CreateCustomer en un Dialog . Si esto es correcto, creo que lo siguiente debería estar cerca de lo que está describiendo como comportamiento deseado.
import { Outlet, useNavigate } from 'react-router-dom' const Customers = () => { const navigate = useNavigate(); return ( <div> ... customers list ... <Button onClick={() => navigate("create")}>Create</Button> <Outlet /> </div> ); }Renderice el cuadro de diálogo abierto de forma predeterminada cuando la ruta coincida y el elemento se renderice.
<Routes> <Route path='/customers' element={<Customers />}> <Route path='create' element={( <Dialog open> <CreateCustomer /> </Dialog> )} /> </Route> </Routes>