为什么 React-router-dom 中的新 'Routes' 语法不适用于我的代码？

Question

我了解到，在新发布的 react 包之后，react-router-dom 中的标签不再起作用，所以我在网上进行了几次研究后改为“Routes”，但仍然不行'工作。下面是我电脑的截图。

也是这个代码

import React from 'react';
import Navbar from './components/Navbar'
import {BrowserRouter as Router, Routes, Route} from 'react-router-dom';
import './App.css';
import Home from './components/pages/Home';
import Services from './components/pages/Services';
import Products from './components/pages/Products';
import SignUp from './components/pages/SignUp';



function App(){
    return (
        <>
        <Router>
        <Navbar />
       
        <Routes>
            <Route exact path="/"   component={Home} /> 
            <Route path="/services" component={Services} />
            <Route path="/products" component={Products} />
            <Route path="/sign-up" component={SignUp} />
        </Routes>
        </Router>
       </>
    );
}
export default App;

//<HeroSection />
//import HeroSection from './components/HeroSection';

Answer 1

在新版本的 react-router-dom 上应该可以。检查一下。

<Routes>
    <Route path="/" element={<Home />} /> 
    <Route path="/services" element={<Services />} />
    <Route path="/products" element={<Products />} />
    <Route path="/sign-up" element={<SignUp />} />
</Routes>

请粘贴您的错误。还有一个问题

为什么 React-router-dom 中的新 'Routes' 语法不适用于我的代码？

Why doesn't the new 'Routes' syntax in React-router-dom work on my code?

javascript

web

reactjs