Why is Route not rendering the main component here-CodePudding

I was following a react tutorial on routing and how it works in react. I have no idea why this code isnt working as intended. If I understand correctly, It is supposed to render a component which I specify. Any help would be appreciated ps: this is the exact same code used in the tutorial i was following and was working fine during it

App.js code

import React, { Component } from 'react';
import {
    BrowserRouter as Router,
    Routes,
    Route,
    Navigate,
    Link
  } from "react-router-dom";
  import Main from"./comp/Mainpage";

class App extends Component {
render() {
    return (
        <Router>
            <Routes>
            <Route exact path="/" component={Main}/>
            </Routes>
            
        </Router>
    
);
}
};
export default App;

Main page code:

import React from'react';
function Main(){
    return (
        <div>
            <h1>Inside main page</h1>
        </div>
    
    );
};

export default Main;

CodePudding user response：

Replace your route from component={Main} to element={<Main />}

<Route exact path="/" element={<Main />} />

I believe its a change in v6 react-router-dom - https://reactrouter.com/docs/en/v6/getting-started/overview