I exported a react js component but when i start my app it not displaying the output-CodePudding

Hi i am new in coding and trying to build a react app. I just create a react component named login.js and export it as default and import it in app.js, but as i start my react app the div that i written in login.js is not displaying on the display.

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

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

export default Login;

App.js code:

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

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

export default App;

my app output: output after running the app

it is exported because it showing this : proof that the component is exported

I tried so many ways but nothing worked. Plz help

CodePudding user response：

As in the document of react-router-dom, you will need to specify your component to a prop named element.

<Route exact path='/' element={<Login />} />

See more here