Tengo una página en <url>/machines que enumera las direcciones IP de un conjunto de máquinas en una red. Quiero poder hacer clic en uno de la lista y vincular a una página <url>/machines/<machineid> para mostrar una nueva página que muestre información sobre esa máquina específica. Quiero que el valor especificado en la URL como <machineid> se pase a la página renderizada como un valor utilizable, por ejemplo, en un prop/param, etc.
Tengo problemas para configurar el enrutador de reacción para lograr esto, y me pregunto si alguien puede ver lo que estoy haciendo mal. He estado siguiendo los documentos de React Router V6, sin embargo, parece que no puedo hacerlo funcionar. Cuando represento la página en <url>/machines/hello , aparece un error en la consola que dice No routes matched location "/machines/hello" . ¿Alguien puede ver lo que estoy haciendo mal?
Inicialmente estaba pensando en renderizar una nueva página (usando un componente diferente) para renderizar la página de información de la máquina, sin embargo, mirando los documentos de React Router V6, parece que el componente <MachineInfo> ahora se renderiza como un elemento secundario de <Machines> ?
Tengo una alert() en el componente <MachineInfo> que no parece estar ejecutándose en absoluto. No recibo alerta.
Aplicación.js
function App() { const value = useContext(Context); return ( <div className="App"> <Routes> <Route path="/" element={<Dashboard />} /> <Route path="machines" element={<Machines />}> <Route path="machines/:id" element={<MachineInfo />} /> // I've tried this using just path=":id" as well with no luck </Route> <Route path="topology" element={<Topology />} /> <Route path="settings" element={<Settings />} /> </Routes> </div> ); }MachineInfo.js
export default function MachineInfo(props) { const [state, dispatch] = useContext(Context); let { id } = useParams<"id">([]); alert("info: " + id) return ( <p>hello</p> ); }Primero, querrá un componente de Layout que tenga su Outlet
export function Layout() { return ( <> <Outlet /> </> ); Ahora envuelva sus otras rutas dentro de este componente de Layout y notará que ahora puede llegar a su ruta anidada diciendo /machines/1 El componente Dashboard es el índice, por lo que / debe coincidir con esta ruta.
function App() { // Not sure why you have value since it doesn't seem to be getting used const value = useContext(Context); return ( <div className="App"> <Routes> <Route path="/*" element={<Layout />}> <Route index element={<Dashboard />} /> <Route path="machines" element={<Machines />}> <Route path=":id" element={<MachineInfo />} /> </Route> <Route path="topology" element={<Topology />} /> <Route path="settings" element={<Settings />} /> </Route> </Routes> </div> ); }