React Router Dom v6 在我的 React 页面中不起作用

Question

这是我的 app.js 我正在尝试预览代码，但它显示的空白页面非常空白，即使在我的终端上显示编译成功也没有错误！

import TopBar from './components/topbar/TopBar';
import Home from './pages/home/home';
import Write from './pages/write';
import Single from './pages/single';
import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
function App() {
  return (
    <>
    <Router>
      <TopBar/>
      <Routes>
         <Route exact path ="/" element = {Home} />      
         <Route path ="/write" element = {Write} />
         <Route path ="/single" element = {Single} />
    
      </Routes>
   
    </Router>
    
    </>
  );
}

export default App;

Answer 1

使用 React Router Dom v6 ，您应该将给定的组件调用为element属性，如下所示：

<Route exact path ="/" element = {<Home/>} />      
<Route path ="/write" element = {<Write/>} />
<Route path ="/single" element = {<Single/>} />

Answer 2

检查您的浏览器控制台以查看更多详细信息。

但据我所知，在第 6 版中<Route/>道具中没有exact的内容删除它

Answer 3

尝试删除确切并使用子路由器，我认为这会有所帮助

 function App() {
    return (
      <>
        <Router>
          <TopBar />
          <Routes>
            <Route path="/" element={Home}>
              <Route path="write" element={Write} />
              <Route path="single" element={Single} />
            </Route>
          </Routes>
        </Router>
      </>
    );
  }