react-router不显示元素[关闭]

Question

我开始为我的应用程序学习react-router。起步不顺利，但最终情况有所好转。但现在，我偶然发现了一些我无法解决的问题，react-router 元素不会渲染，所以

<BrowserRouter></BrowserRouter>

内的所有内容自然不会渲染。所以，我想知道为什么会发生这种情况。

import './twcss-out.css';
import '../bootstrap-icons/font/bootstrap-icons.css';
import { Home } from './home/home';
import { BrowserRouter, Routes, Route } from 'react-router-dom';

export function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path='/' element={<Home></Home>}></Route>
      </Routes>
    </BrowserRouter>
  ); 
}

这是我的代码

这就是结果

在开发面板中，我看到根 div 下面没有元素被渲染，所以页面是白色的

我尝试使用phind.com AI来解决它，但它没有给出任何解决方案。我重新观看了教程视频，仍然没有任何结果，在 vscode 和浏览器控制台中查找错误，一切都干净了。我怀疑问题出在实际代码中，但是当我删除react-router元素时，它全部按照应有的方式呈现

Answer 1

值得注意的是，element prop 应该是一个 React 元素，而不是一个 React 组件。

import { BrowserRouter, Routes, Route } from 'react-router-dom';
import { Home } from './home/home';

export function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path='/' element={<Home />} />
      </Routes>
    </BrowserRouter>
  ); 
}

确保您的 Home 组件已正确定义和导出