Tengo un siguiente archivo de índice:
<BrowserRouter> <Routes> <Route path="/" element={Home} <Route element={Navigation} </Routes> </BrowserRouter>Tengo varias rutas que tengo que cargar, así que para eso he escrito un componente:
const Navigation = () => { <> <Route path="/not-available-primary" element={NotAvaliable}/> <Route path="/not-available-Secondary" element={Avaliable}/> <Route path="/available-primary" element={Primary}/> <Route path="/available-Secondary" element={Secondary}/> <Route path="/direct-debit-primary" element={DirectDBB}/> <Route path="/direct-debit-secondary" element={DirectDBBSecondary}/> </> }Pero aquí, no representa el componente y no proporciona rutas que coincidan con la ubicación. Cómo puedo solucionar esto ?
Tienes que darle un Componente al accesorio del elemento, así:
<BrowserRouter> <Routes> <Route path="/" element={<Home />} /> <Route path="/*" element={<Navigation />} /> </Routes> </BrowserRouter>y
const Navigation = () => { return (<> <Route path="/not-available-primary" element={<NotAvaliable />}/> <Route path="/not-available-Secondary" element={<Avaliable />}/> <Route path="/available-primary" element={<Primary />}/> <Route path="/available-Secondary" element={<Secondary />}/> <Route path="/direct-debit-primary" element={<DirectDBB />}/> <Route path="/direct-debit-secondary" element={<DirectDBBSecondary />}/> </>) }o
<BrowserRouter> <Routes> <Route path="/" element={<Home />} /> <Route path="/*"> <Route path="not-available-primary" element={<NotAvaliable />}/> <Route path="not-available-Secondary" element={<Avaliable />}/> <Route path="available-primary" element={<Primary />}/> <Route path="available-Secondary" element={<Secondary />}/> <Route path="direct-debit-primary" element={<DirectDBB />}/> <Route path="direct-debit-secondary" element={<DirectDBBSecondary />}/> </Route> </Routes> </BrowserRouter>Tenga en cuenta que en la solución de segundos (rutas anidadas) borré el "/".
Documentación aquí
en su archivo de índice
<Route path="/" compoment={Home}si "Navegación" es tu clase
const Navigation = () => { return ( <> <Routes> <Route path="/not-available-primary" component={NotAvaliable}/> <Route path="/not-available-Secondary" component={Avaliable}/> <Route path="/available-primary" component={Primary}/> <Route path="/available-Secondary" component={Secondary}/> <Route path="/direct-debit-primary" component={DirectDBB}/> <Route path="/direct-debit-secondary" component={DirectDBBSecondary}/> </Routes> </> ) }En el primer uso <Switch> en el componente de navegación:
const Navigation = () => { <Switch> <Route path="/not-available-primary" component={NotAvaliable}/> <Route path="/not-available-Secondary" component={Avaliable}/> <Route path="/available-primary" component={Primary}/> <Route path="/available-Secondary" component={Secondary}/> <Route path="/direct-debit-primary" component={DirectDBB}/> <Route path="/direct-debit-secondary" component={DirectDBBSecondary}/> </Switch> }entonces, agregue el componente a la ruta:
<BrowserRouter> <Switch> <Route path="/" exact component={Home} /> <Route path="/login" exact component={LoginForm} /> <Route component={Navigation} /> </Switch> </BrowserRouter>