React Router Dom路由失效求助：输入URL页面内容不显示

你的问题出在React Router v6+版本的语法变更上，当前代码用的是旧版本写法，在新版本里已经不生效，按下面步骤修改就能解决：

关键修改点 #

• 必须用Routes组件包裹所有Route，它会自动做精确匹配，避免多个路由同时渲染
• Route不再通过子组件传递页面，而是改用element属性传入组件

修改后的完整代码 #

import Index from "./pages/Index";
import Login from "./pages/Login";
import Product from "./pages/Product";
import Register from "./pages/Register";
// 新增导入Routes组件
import { BrowserRouter, Route, Routes } from 'react-router-dom';

function App() {
  return (
    <div>
      <BrowserRouter>
        {/* 用Routes包裹所有Route */}
        <Routes>
          {/* 用element属性传入页面组件 */}
          <Route path="/" element={<Index />} />
          <Route path="/login" element={<Login />} />
          <Route path="/product" element={<Product />} />
          <Route path="/register" element={<Register />} />
        </Routes>
      </BrowserRouter>
    </div> 
  );
}

export default App;

额外说明 #

如果你的项目装的是React Router v5及更早版本，也可以给根路由加exact属性解决多路由同时渲染的问题，但更推荐升级到v6+并使用上面的新写法——v6是官方主推版本，API更简洁高效。

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