I'm new to React, and I'm trying to set up paths using BrowserRouter, Route and Routes. Thus far, my code looks like the following

import React from "react"
import "./App.css";
import { BrowserRouter as Router, Route, Routes } from 'react-router-dom';
import Login from "./Login";

function App() {

    return (
    <div className="App">
        <h1>App page</h1>
        <Router>
            <Routes>
                <Route exact path="/login">
                     <Login />
                </Route>
            </Routes>
        </Router>
    </div>
  )
}

export default App

However, nothing's appearing on the browser page - the console output looks like the following

The error seems to be with the router bits, since when I take those lines out, things in the h1 tag seem to be printing fine. Would you know how to fix this/what might be causing this?

Thanks!