I'm learning reactjs front-end at the moment. But I am stuck that the Routes is not working.
I'm using ReactJS version 18.0.0

My App.js:

import logo from './logo.svg';
import './App.css';
import { Home } from './Home';
import { BrowserRouter, Route, Routes, NavLink } from 'react-router-dom';

function App() {
  return (
    <BrowserRouter>
    <div className="App container">
      <h3 className="d-flex justify-content-center m-3">
        React JS Frontend
      </h3>
        
      <nav className="navbar navbar-expand-sm bg-light navbar-dark">
        <ul className="navbar-nav">
          <li className="nav-item- m-1">
            <NavLink className="btn btn-light btn-outline-primary" to="/home">
              Home
            </NavLink>
          </li>
        </ul>
      </nav>

      <Routes>
        <Route path='/home' component={Home} />
      </Routes>
    </div>
    </BrowserRouter>
  );
}

export default App;

Then my Home.js:

import React,{Component} from 'react';

export class Home extends Component{
    render(){
        return(
            <div>
                <h3>This is Home page</h3>
            </div>
        )
    }
}

Need advice please.
Thank you.

CodePudding user response：

You seem to be confusing the component prop for your Route with an older version of react-router.

Change it to element like this:

<Routes>
  <Route path='/home' element={Home} />
</Routes>