SyntaxError: Expected corresponding JSX closing tag for <Route> with react-router-dom v6

Question

我希望我的 React 应用程序具有类似于 localhost:3000/projects/construction 和 localhost:3000/services/landscape.

的网址

react-router-docsdom 说你可以像这样嵌套路由：

function App() {
  return (
    <Routes>
      <Route path="invoices" element={<Invoices />}>
        <Route path="sent" element={<SentInvoices />} />
      </Route>
    </Routes>
  );
}

为什么当我这样做时我的应用程序失败并出现 Expected corresponding JSX closing tag for <Route> 错误？

<BrowserRouter>
 <Routes>
  <Route index element={<Home />} />
  <Route path='/projects' element={<Projects />}>
   <Route path='/construction' element={<Construction />}>
  </Route>
  <Route path='/services' element={<Services />}>
   <Route path='/landscape' element={<Landscape />}>
  </Route>
  <Route path='/about' element={<About />} />
  <Route path='/contact' element={<Contact />} />
  <Route path='*' element={<Navigate to='/' replace />} />
 </Routes>
</BrowserRouter>

编辑：选择的答案说要关闭标签，这是正确的，但这会使所有页面呈现空白（除非我取消注释嵌套路由）。

App.js

import Services from './components/Services.js'
import Landscape from './components/Landscape.js'

function App() {
 return (
  <BrowserRouter>
   <Routes>
    <Route index element={<Home />} />
    <Route path='/services' element={<Services />}>
     <Route path='/landscape' element={<Landscape />} />
    </Route>
   </Routes>
  </BrowserRouter>
 );
}

export default App;

Services.js

import { Outlet } from 'react-router-dom'

function Services() {
 return (
  <Container>
   <Row>
    <Col>Services</Col>
   </Row>
   <Outlet />
  </Container>
 );
}

export default Services;

Answer 1

Services 和 Landscape 路由缺少结束标记。他们可以 self-close，或添加结束标记。

<BrowserRouter>
  <Routes>
    <Route index element={<Home />} />
    <Route path="/projects" element={<Projects />}>
      <Route path="/construction" element={<Construction />}></Route>
      <Route path="/services" element={<Services />} />   // <-- close
      <Route path="/landscape" element={<Landscape />} /> // <-- close
    </Route>
    <Route path="/about" element={<About />} />
    <Route path="/contact" element={<Contact />} />
    <Route path="*" element={<Navigate to="/" replace />} />
  </Routes>
</BrowserRouter>

SyntaxError: Expected corresponding JSX closing tag for <Route> with react-router-dom v6

SyntaxError: Expected corresponding JSX closing tag for <Route> with react-router-dom v6

reactjs

react-router-dom