React Router Dom isn't rendering my pages-CodePudding

I am trying to learn react, but I am stuck with react render dom which doesn't want to render my page.

My App.js

import React from 'react';
import { Route } from 'react-router-dom';
import './App.css';
import HomePage from './pages/homepage/homepage.component.jsx';

function App() {
  return (
    <div>
      <Route exact path='/' component={ HomePage }/>
    </div>
  );
}

export default App;

And my index.js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import { BrowserRouter } from 'react-router-dom';

ReactDOM.render(
  <BrowserRouter>
    <App />
  </BrowserRouter>,
  document.getElementById('root')
);

CodePudding user response：

React Router v6 doesn't support exact anymore because all paths are match exactly by default. And component changes to element in v6. You need also to import Routes from react-router-dom. Finaly, HomePage must be <HomePage/>

import React from 'react';
import { Route, Routes } from 'react-router-dom';
import './App.css';
import HomePage from './pages/homepage/homepage.component.jsx';

function App() {
  return (
    <Routes>
      <Route path='/' element={ <HomePage/> }/>
    </Routes>
  );
}

export default App;