React Router v6 渲染空白页面

Question

I'm kinda new to react and currently learning. I kinda stucked at this stage - As i started writing a ChatInput component for an another component which was already imported to App.js and to Chat.js as well. But as i saved and refreshed the code. The react router is rendering a blank page. While there's no error in the code.This problem didnt showed up and the page was rendering fine inspite of the chat component was there but without ChatInput.js.

But now even if i include the component into App.js. the react router renders a blank page and if i removes component from app.js. The code renders the elements.

Please help as i'm new and cant able to figure out What's the issue. I'm currently on React-router V6

App.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;
  }
`

Index.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();

Answer 1

Index.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';
        import {BrowserRouter} from "react-router-dom";
        
        ReactDOM.render(
          <React.StrictMode>
            <Provider store={store}>
              <BrowserRouter>
                <App />
              </BrowserRouter>
            </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();

App.js

import React from 'react'
import './App.css'
import { 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">
      <Routes>
        <Route path="/" element={
          <>
            <Header />
            <AppBody>
              <Sidebar />
              <Chat />
            </AppBody>
          </>
        } />
      </Routes>
    </div>
  )
}

export default App