React Router v6 渲染空白页面

Question

我有点新反应，目前正在学习。 我在这个阶段有点卡住了——当我开始为另一个已经导入 App.js 和 Chat.js 的组件编写 ChatInput 组件时。 但是当我保存并刷新代码时。 反应路由器正在呈现一个空白页面。 虽然代码中没有错误。尽管存在聊天组件但没有 ChatInput.js，但该问题并未出现，并且页面呈现良好。

但现在即使我将组件包含到 App.js 中。 反应路由器呈现一个空白页面，如果我从 app.js 中删除组件。 代码呈现元素。

请帮忙，因为我是新手，无法弄清楚是什么问题。 我目前在 React-router V6

应用程序.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;
`

聊天.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``

聊天输入.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;
  }
`

索引.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

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

应用程序.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