You need to wrap your Routes in the Router and Routes components.

This is for react-router-dom v6:

import './App.css';
import Home from './pages/Home';
import Rooms from './pages/Rooms';
import SingleRoom from './pages/SingleRoom';
import Error from './pages/Error';
import { Routes, Route, Switch, BrowserRouter as Router } from 'react-router-dom';

function App() {
  return (
    <Router>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/rooms/" element={<Rooms />} />
        <Route path="/singleroom" element={<SingleRoom />}/>
      </Routes>
    </Router>
  );
}

export default App;

Assuming you already wrapped your app with <Router> inside your index.js file, now every time you use routes You need to wrap them with <Switch>

<Switch>
    <Route exact path="/" component={Home}/>
    <Route exact  path="/rooms/" component={Rooms}/>
    <Route exactpath="/singleroom" component={SingleRoom}/>
</Switch>