React route is not rendering contents-CodePudding

I am new to browser router, i am trying to route my login page but its contents are not rendering,Here is my App.js code-

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

function App() {
  return (
     <div className="App">
      <Router>
        <Routes>
          <Route exact path="/Login" element={<div>I am good</div>}>
            <Login />
          </Route>
        </Routes>
      </Router>
    </div>
  );
}

export default App;

My web app should show "Login" on the screen but it is not rendering it, this is my Login.js-

import React from 'react';
import styled from "styled-components";

const Login = (props) => {  
    return (
        <div>Login</div>
    );
};

const Container = styled.section`
overflow: hidden;
display: flex;
flex-direction: column;
text-align: center;
height: 100vh;
`;

   export default Login;

CodePudding user response：

Only <Route> should be in <Routes>.

In this use case it seems that the <Login /> should be assigned to element, if this is the component to render for this page.

Example:

<Routes>
  <Route exact path="/Login" element={<Login />} />
</Routes>

Hope this will help.