Soy un poco nuevo para reaccionar y actualmente estoy aprendiendo. Me quedé un poco atascado en esta etapa: comencé a escribir un componente ChatInput para otro componente que ya se había importado a App.js y también a Chat.js. Pero como guardé y actualicé el código. El enrutador de reacción muestra una página en blanco. Si bien no hay ningún error en el código, este problema no apareció y la página se mostraba bien a pesar de que el componente de chat estaba allí pero sin ChatInput.js.

Pero ahora, incluso si incluyo el componente en App.js. el enrutador de reacción muestra una página en blanco y si elimino el componente de app.js. El código representa los elementos.

Por favor, ayuda ya que soy nuevo y no puedo averiguar cuál es el problema. Actualmente estoy en React-router V6

Aplicación.js

 import React from 'react' import './App.css' import { BrowserRouter, Routes, Route } from 'react-router-dom' import Header from './components/Header' import styled from 'styled-components' import Sidebar from './components/Sidebar' import Chat from './components/Chat' function App() { return ( <div className="app"> <BrowserRouter> <Header /> <AppBody> <Sidebar /> <Chat /> <Routes> <Route path="/" element=""></Route> </Routes> </AppBody> </BrowserRouter> </div> ) } export default App const AppBody = styled.div` display: flex; height: 100vh; `

Chat.js

 import React from 'react' import StarBorderOutLinedIcon from '@material-ui/icons/StarBorderOutlined' import InfoOutlinedIcon from '@material-ui/icons/InfoOutlined' import { useSelector } from 'react-redux' import { selectRoomId } from '../features/appSlice' import ChatInput from './ChatInput' import styled from 'styled-components' function Chat() { const roomId = useSelector(selectRoomId) return ( <ChatContainer> <> <Header> <HeaderLeft> <h4> <strong>#Room-name</strong> </h4> <StarBorderOutLinedIcon /> </HeaderLeft> <HeaderRight> <p> <InfoOutlinedIcon /> Details </p> </HeaderRight> </Header> <ChatMessages></ChatMessages> <ChatInput channelId={roomId} /> </> </ChatContainer> ) } export default Chat const ChatContainer = styled.div` flex: 0.7; flex-grow: 1; overflow-y: scroll; margin-top: 60px; ` const Header = styled.div` display: flex; justify-content: space-between; padding: 20px; border-bottom: 1px solid lightgray; ` const HeaderLeft = styled.div` display: flex; align-items: center; > h4 { display: flex; text-transform: lowercase; margin-right: 10px; } > h4 > .MuiSvgIcon-root { margin-left: 10px; font-size: 18px; } ` const HeaderRight = styled.div` > p { display: flex; align-items: center; font-size: 14px; } > p > .MuiSvgIcon-root { margin-right: 5px !important; font-size: 16px; } ` const ChatMessages = styled.div``

ChatInput.js

 import React from 'react' import styled from 'styled-components' import { Button } from '@material-ui/core' function ChatInput(channelName, channelId) { const sendMessage = (e) => { e.preventDefault() } return ( <ChatInputContainer> <form> <input placeholder={'Message #ROOM'} /> <Button hidden type="submit" onClick={sendMessage}> Send </Button> </form> </ChatInputContainer> ) } export default ChatInput const ChatInputContainer = styled.div` border-radius: 20px; > form { position: relative; display: flex; justify-content: center; } > form > input { position: fixed; bottom: 30px; width: 60%; border: 1px solid gray; border-radius: 3px; padding: 20px; outline: none; } > form > button { display: none !important; } `

Índice.js

 import React from 'react' import ReactDOM from 'react-dom' import './index.css' import App from './App' import { store } from './app/store' import { Provider } from 'react-redux' import * as serviceWorker from './serviceWorker'; ReactDOM.render( <React.StrictMode> <Provider store={store}> <App /> </Provider> </React.StrictMode>, document.getElementById('root'), ) // If you want your app to work offline and load faster, you can change // unregister() to register() below. Note this comes with some pitfalls. serviceWorker.unregister();