React项目中react-router-dom的BrowserRouter路由不生效问题

你的路由组件完全不渲染，核心原因是react-router-dom v6 已废弃component属性，同时exact属性也不再需要（v6 的 Route 默认就是精确匹配规则），你还在沿用 v5 的写法导致路由无法正常工作。

具体修改点： #

• 将所有 Route 上的 component={组件名} 替换为 element={<组件名 />}（需以 JSX 形式传入组件）
• 移除根路由的 exact 属性

修改后的完整代码： #

import React from "react";
import GlobalStyle from "./globalStyle.js";
import { BrowserRouter as Router, Routes, Route } from "react-router-dom";

//Pages
import Home from "./Pages/Home";
import Pricing from "./Pages/PricingPage.js";
import Signup from "./Pages/SignupPage.js";

function App() {
  return (
    <Router>
      <GlobalStyle />
      Test
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/signup" element={<Signup />} />
        <Route path="/pricing" element={<Pricing />} />
      </Routes>
    </Router>
  );
}

export default App;

修改完成后，访问对应路径就能正常渲染页面组件了。

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