React-Router组件无法显示，路由匹配提示无element错误求助

核心问题 #

你的代码存在路由标签语法错误，导致React-Router无法正确解析路由配置，触发了"Matched leaf route at location "/dashboard" does not have an element"的错误。具体是App.js中每个<Route>标签后面多写了一个冗余的</Route>闭合标签，破坏了路由结构的合法性。

修复步骤 #

修改App.js中的路由配置部分，移除多余的</Route>标签：

修复后的App.js代码 #

import React, { useState } from 'react';
import './App.css';
import { BrowserRouter, Route, Routes } from 'react-router-dom';
import Dashboard from './components/Dashboard/Dashboard';
import Preferences from './components/Preferences/Preferences';
import Login from './components/Login/Login';

function App() {
  const [token, setToken] = useState();

  if(!token) {
    return <Login setToken={setToken} />
  }

  return (
    <div className="wrapper">
      <h1>Application</h1>
      <BrowserRouter>
        <Routes>
          {/* 移除每个Route后多余的闭合标签 */}
          <Route path="/dashboard" element={<Dashboard/>} />
          <Route path="/preferences" element={<Preferences/>} />
        </Routes>
      </BrowserRouter>
    </div>
  );
}

export default App;

效果说明 #

修复后访问http://localhost:3000/dashboard时，页面会同时显示：

• App组件中的<h1>Application</h1>
• Dashboard组件中的<h2>Dashboard</h2>

这是因为你的App组件已将公共内容（Application标题）放在<BrowserRouter>外部，路由匹配后会将对应组件渲染在<Routes>位置，自然会和公共内容一同展示。

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