Soy nuevo en la aplicación de reacción que intenta agregar un componente y se carga cuando se abre la aplicación, pero se muestra en la consola Matched leaf route at location "/" does not have an element. This means it will render an <Outlet /> with a null value by default resulting in an "empty" page

Aplicación.js

 import React from 'react'; import './app.css'; import { BrowserRouter as Router, Route, Routes } from 'react-router-dom'; import JOB_DESC from './job_desc'; function App() { return ( <Router> <Routes> <Route exact path='/' component={JOB_DESC} /> </Routes> </Router> ) } export default App;

trabajo_desc.js

 import React, { Component } from 'react'; import './app.css'; import ReactImage from './react.png'; export default class JOB_DESC extends Component { state = { data: null }; componentDidMount() { fetch('/api/getUsername') .then(res => res.json()) .then(res => this.setState({ data : res.data})); } render() { const { data } = this.state; console.log("DATA", data); return ( <div> <h1>Test</h1> {username ? <h1>{`Hello ${username}`}</h1> : <h1>Loading.. please wait!</h1>} <img src={ReactImage} alt="react" /> </div> ); } }

índice.js

 import React from 'react'; import ReactDOM from 'react-dom'; import App from './App'; ReactDOM.render(<App />, document.getElementById('root'));