React使用Routes和Route时页面空白、Home组件不显示问题求助

核心问题点 #

• 路由容器重复嵌套：入口文件index.js已经用BrowserRouter包裹了根组件，App.js内重复导入路由上下文容器会导致路由匹配逻辑失效，直接渲染空白。
• 版本语法不匹配：如果使用react-router-dom v6版本，Route组件默认就是精确匹配，不需要加v5版本的exact属性；如果本地装的是v5版本，根本不存在Routes组件，用了会直接报错。
• 导入路径错误：Home.js内导入Navbar的路径写的是当前目录下的./Navbar.js，但Navbar实际存放在components目录下，路径不匹配会触发编译错误中断渲染；App.js内也存在未使用的Navbar、Router冗余导入。

修复代码 #

修正后 App.js #

删除冗余的BrowserRouter导入、未使用的Navbar导入，去掉Route上无效的exact属性：

import "./App.css";
import Home from "./components/Home.js";
import { Route, Routes } from "react-router-dom";

function App() {
  return (
    <div className="App">
      <div>
        <Routes>
          <Route path="/" element={<Home />} />
        </Routes>
      </div>
    </div>
  );
}

export default App;

修正后 index.js #

保留最外层的BrowserRouter包裹即可，不需要改动：

import * as React from "react";
import * as ReactDOM from "react-dom";
import { BrowserRouter } from "react-router-dom";
import "./index.css";
import App from "./App";

ReactDOM.render(
  <BrowserRouter>
    <App />
  </BrowserRouter>,
  document.getElementById("root")
);

修正后 Home.js #

删除错误路径的Navbar导入（如果需要使用Navbar，补对相对路径即可）：

import React from "react";

const Home = () => {
  const text = "Home";
  return (
    <div>
      <h2>{text}</h2>
    </div>
  );
}

export default Home;

版本校验 #

改完代码如果还是白屏，执行以下命令检查本地安装的react-router-dom版本：
npm list react-router-dom
如果版本号低于6.0，执行升级命令安装v6版本（Routes是v6新增组件，低版本不支持）：
npm install react-router-dom@6

注意：整个React应用只需要在最靠近根节点的位置包裹一次BrowserRouter即可，内部子组件不需要重复包裹路由容器，否则会导致路由上下文错乱。

内容的提问来源于stack exchange，提问作者rawan arafat