React v6使用BrowserRouter、Routes、Route时结构错误如何解决？

你当前使用的是react-router-dom v6版本，和旧版v5的语法规则差异较大，触发错误的两个核心问题如下：

• Routes组件的直接子元素仅支持Route或React.Fragment，你直接把Navbar、<br/>这类公共布局元素放在Routes内部不符合语法要求
• v6版本废弃了Route组件的component属性，替换为element属性，需要传入JSX元素而非组件引用；同时v6默认开启路径精确匹配，不需要再加exact属性
• 你引入了BrowserRouter但没有在代码中使用，路由组件必须包裹在BrowserRouter内部才能正常运行

import React from 'react';
import { BrowserRouter, Routes, Route } from 'react-router-dom';
import "bootstrap/dist/css/bootstrap.min.css";

import Navbar from "./components/navbar.component.js";
import PortfolioList from "./components/portfolio-list.component";
import EditPortfolio from "./components/edit-portfolio.component";
import CreatePortfolio from "./components/create-portfolio.component";
import CreateUser from "./components/create-user.component";

function App() {
  return (
    <BrowserRouter>
      <Navbar />
      <br/>
      <Routes>
        <Route path="/" element={<PortfolioList />} />
        <Route path="/edit/:id" element={<EditPortfolio />} />
        <Route path="/create" element={<CreatePortfolio />} />
        <Route path="/user" element={<CreateUser />} />
      </Routes>
    </BrowserRouter>
  );
}

export default App;

内容的提问来源于stack exchange，提问作者AustinNoyes-Business