0

la pagina se queda en blanco cuando carga el navegador,las rutas no acceden , ya he intentado todo y no funciona
import React from 'react' import { BrowserRouter as Router, Route } from 'react-router-dom'

    const Rutas = () => {
      return (
        <div>
            <div className="container">
            <h1>Router</h1>
            </div>
            <Router>
    
            <Route exact path="/" >
                <h2>Home</h2>
                <p>Home page </p>
              </Route>
           
              <Route path="/about">
                <h2>About</h2>
                <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Accusamus id deleniti 
             quas fuga, dolorum odio.</p>
              </Route>
    
              <Route path="/contact">
                <h2>Contact</h2>
              </Route>
    
            </Router>
    
        </div>
      )
    }
    
    export default Rutas
1
  • 2
    que version del router instalaste? porque si es la 5 te faltan los switch envolviendo a los route Commented el 25 mar. 2022 a las 1:10

2 respuestas 2

0

Prueba agregando Switch así:

import React from 'react' import { BrowserRouter as Router, Route, Switch } from 'react-router-dom'

y <Switch> </Switch> dentro de Router <Router> </Router> así:

   <Router>
    <Switch>
       <Route exact path="/" >
          <h2>Home</h2>
          <p>Home page </p>
       </Route>
           
       <Route path="/about">
          <h2>About</h2>
          <p>Lorem ipsum dolor sit amet...</p>
       </Route>
    
       <Route path="/contact">
           <h2>Contact</h2>
       </Route>
     </Switch>
    </Router>

¡Espero te ayude!

0

Si estás utilizando la React Router v6 debes utilizar Routes. Si es react Router v5 debes utilizar Switch

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

const Rutas = () => {
  return (
    <div>
      <div className="container">
        <h1>Router</h1>
      </div>
      <Router>
        <Routes>
          <Route exact path="/">
            <h2>Home</h2>
            <p>Home page </p>
          </Route>

          <Route path="/about">
            <h2>About</h2>
            <p>
              Lorem ipsum dolor sit amet consectetur, adipisicing elit.
              Accusamus id deleniti quas fuga, dolorum odio.
            </p>
          </Route>

          <Route path="/contact">
            <h2>Contact</h2>
          </Route>
        </Routes>
      </Router>
    </div>
  );
};
export default Rutas;

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.