reactjs - 导入 React-Router-Dom 后 React App 变为空白

Question

在导入react-router之前它工作正常。现在它构建成功，但显示空白页面。这是我的代码:

App.js

//import ReactDOM from "react-dom/client";
import { BrowserRouter, Routes, Route } from "react-router-dom";
import  'bootstrap/dist/css/bootstrap.min.css';
import Pending from './Pages/Home';
import Home from './Pages/Pending';

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

Home.js

import React, { Component } from "react";
import 'bootstrap/dist/css/bootstrap.min.css';
import NavBar from '../components/NavBar';

function Home(){
  return(
    <div>
      <div>
        <NavBar/>
      </div>
      <h1>HI</h1>
    </div>
  );
}

export default Home;

Answer 1

问题

Route组件 API 已更改 react-router-dom@6 。所有路由内容现在都呈现在单个 element 上 Prop 作为 ReactNode ，又名 JSX，不是对 React 组件的引用。

解决方案

将路由组件渲染为 JSX，即 <Home />而不是Home .

import { BrowserRouter, Routes, Route } from "react-router-dom";
import 'bootstrap/dist/css/bootstrap.min.css';
import Pending from './Pages/Home';
import Home from './Pages/Pending';

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