React-Router无法渲染LandingPage组件，求排查解决方法

在React项目中使用react-router-dom 6.23.1配置路由后，LandingPage组件无法正常显示。已尝试修改path属性、替换React.StrictMode等方法，均未解决问题。相关代码如下：

Router.tsx #

import {
  BrowserRouter as Switch,
  Route,
  BrowserRouter,
} from "react-router-dom";
import LandingPage from "./components/LandingPage";

const Router = () => {
  return (
    <BrowserRouter>
      <Switch>
        <Route path="/" element={<LandingPage />} />
      </Switch>
    </BrowserRouter>
  );
};

export default Router;

main.tsx #

import React from "react";
import ReactDOM from "react-dom/client";
import "./index.css";
import Router from "./Router.tsx";

ReactDOM.createRoot(document.getElementById("root")!).render(
  <React.StrictMode>
    <Router />
  </React.StrictMode>
);

LandingPage.tsx #

import React from "react";

const LandingPage: React.FC = () => {
  return <h1>Welcome!!!</h1>;
};

export default LandingPage;

问题原因与修复方法 #

核心问题 #

代码中存在路由组件导入错误：将BrowserRouter重命名为Switch，同时又导入了原始的BrowserRouter，导致渲染时嵌套了两个BrowserRouter实例，破坏了路由的正常工作。另外，react-router-dom v6版本已移除Switch组件，取而代之的是Routes组件，这也是组件无法渲染的关键原因。

修复步骤 #

1. 纠正组件导入：从react-router-dom中正确导入Routes组件，取消错误的BrowserRouter重命名操作。
2. 替换路由容器组件：将代码中的<Switch>替换为<Routes>。

修改后的Router.tsx代码如下：

import { BrowserRouter, Routes, Route } from "react-router-dom";
import LandingPage from "./components/LandingPage";

const Router = () => {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<LandingPage />} />
      </Routes>
    </BrowserRouter>
  );
};

export default Router;

额外说明 #

• react-router-dom v6中，所有路由必须包裹在<Routes>组件内部，你原本的<Route>组件element属性写法是正确的。
• main.tsx中用React.StrictMode包裹组件是合理操作，无需替换为BrowserRouter，这不会影响路由功能。

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