0
279
Viewscómo renderizar páginas en el tablero en reaccionar usando material Ui
Me enfrento a un poco de dificultad, tengo que administrar mi tablero usando material-UI con otros componentes. El proceso de aplicación es que primero quiero abrir la espuma de inicio de sesión y luego el tablero y estoy dispuesto a cambiar solo la parte central derecha de el tablero con el componente diferente seleccionando la opción listItem
aquí está mi tablero
aquí están todas las rutas definidas en mi App.js
<Provider store={store}> <BrowserRouter> < Routes> <Route exact path='/' element={<Login/>} /> <Route exact path='/dashboard' element={<Dashboard/>} /> <Route exact path='/product' element={<Product/>}/> </Routes> </BrowserRouter> </Provider> actualmente, el problema es que cuando voy a iniciar sesión, que está en mi ruta "/" y después de la autenticación, la aplicación navega en el tablero, pero cuando hago clic en la pestaña de mi producto, el tablero desaparece allí.
aquí está la página de mi producto
Estoy dispuesto a que todas las páginas se muestren solo en el área de texto donde se muestra el texto.
1 answers
Answer question0
Voy a hacer algunas suposiciones antes de responder a su pregunta:
- Quiere que la vista del panel esté siempre disponible
- La pantalla blanca de la vista del Tablero debería recibir contenido diferente según la ruta en la que se encuentre actualmente
En su aplicación, debe tener algún tipo de Layout que envuelva toda la aplicación. Está utilizando react-router v6 , por lo que lo más probable es que el camino a seguir sea este:
<Provider store={store}> <BrowserRouter> <Routes> <Route path="/" element={<Layout />}> <Route exact path='/login' element={<Login/>} /> <Route exact path='/dashboard' element={<Dashboard/>} /> <Route exact path='/product' element={<Product/>}/> </Route> </Routes> </BrowserRouter> </Provider> Y en su componente Layout , algo como esto:
import { Outlet } from 'react-router-dom'; const Layout = () => ( <main> <Outlet /> </main> ); Puede consultar la documentación react-router para <Outlet />
¿Ayudó?
EDITAR: Olvidé decir que su vista <Layout /> debe tener el Cajón que está mostrando en su primera captura de pantalla, y el espacio en blanco es donde debería estar Outlet .