【问题标题】：React App goes blank after importing React-Router-Dom导入 React-Router-Dom 后 React App 变为空白
【发布时间】：2022-12-06 08:21:37
【问题描述】：

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

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

首页.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;

【问题讨论】：

标签： reactjs react-router react-router-dom

【解决方案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>
  );
}

【讨论】：

【解决方案2】：

您应该指定您使用的是哪个版本的 react-router-dom。所以我只是假设，您使用的是最新的 v6。

在您的 App.js 文件中，您必须进行以下更改才能工作：

import { 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 (
             <Routes>
               <Route index path="/" element={<Home />}/>
                  <Route path="pending" element={<Pending />} />  
             </Routes>
          );
    }

更多信息请访问官方文档here!

【讨论】：

非常感谢。重新启动笔记本电脑解决了这个问题。
@怪胎机器人，?

【解决方案3】：

import './App.css';

import {   BrowserRouter as Router ,  Route, Routes } from "react-router-dom";
import Header from './Components/Header';
import Footer from './Components/Footer';

import Home from './Components/Home';
import About from './Components/About';


function App() {
  return (
    <>
    <Router>
      <Header/>
        <Routes>
            <Route path="/" element={ <Home/> } />
            <Route path="/About" element={ <About/> } />
        </Routes>
      <Footer/>
    </Router>
    </>
  );
}

export default App;

【讨论】：

我认为您也应该为您的代码提供一些答案。直接复制粘贴一段代码，跟问题一点关系都没有，看不懂。此外，由于您的 App 中只有一个元素，因此您不需要使用 React.Fragment <>，当您有多个子元素时，您可以使用片段，因为 React 只渲染一个元素。