React Router returns me a blank web page not working

userekfm1 0
Viewed 27

I am facing a problem. I am trying to use React Router but it keeps showing me a blank page. Here is my code:

App.js:

import React, {useEffect, useState} from 'react'; 
import ConceptosBasicos from "./components/ConceptosBasicos";


function App(){
 return(
     <div>
      <h1>React Router</h1>
      <a href="https://reactrouter.com/web/guides/quick-start" 
      target="_blank" 
      rel="noreferrer"
      >
        Documentación</a>
        <hr/>
        <ConceptosBasicos/>
      </div>
  );
};

export default App;

ConceptosBásicos.js:

import React, { Component }  from 'react';

import { BrowserRouter as Router, Route, Routes } from 'react-router-dom';


const ConceptosBasicos=() =>{
  return(
    <div>
      <h2>Conceptos Básicos</h2>
    <Router>
      <Routes>
        <Route exact path="/">
        <h3>Home</h3>
        <p>Bienvenid@s al tema de las Rutas en React</p>
       </Route>
       <Route exact path="/acerca">
        <h3>Acerca</h3>
      </Route>
      <Route exact path="/contacto">
        <h3>Contacto</h3>
      </Route>
      </Routes>
    </Router>
  </div>
  );
};

export default ConceptosBasicos;

I've installed "React Router V6", can anyone tell me what is the problem? Thanks for all the helpers.

react-router-dom react-router reactjs javascript
2 Answers

the new way to write react router is

<BrowserRouter> 
      <Routes>
            <Route path="/" element={<Home/>}
      </Routes>
</BrowserRouter>
Mazen Mohamed0

you should change all your <Route/> as below

  • you don't require to put exact as in V6 its by default read more here

  • you have to put what elements / components are to be rendered when path matches in an element prop

    <Routes>
   <Route path="/" element={
     <>
       <h3>Home</h3>
       <p>Bienvenid@s al tema de las Rutas en React</p>
     </>
   }/>
   <Route path="/acerca" element={<h3>Acerca</h3>}/>
   <Route path="/contacto" element={<h3>Contacto</h3>}/>
</Routes>
KcH0
Related