0

He creado una web con React Vite y para hacer el enrutamiento lo he hecho con react-router-dom.

Cuando visualizo la web cuando la estoy creando todo esta bien. Las rutas funcionan y la consola no me da ningún error. En cambio cuando subo mi web las rutas no funcionan.

No se que es lo que falla. Lo he revisado todo. El main.jsx, el index.js, el App.jsx...

Estas son las versiones instaladas:

       "dependencies": {
    "@emailjs/browser": "^4.3.3",
    "emailjs-com": "^3.2.0",
    "express": "^4.18.2",
    "localforage": "^1.10.0",
    "match-sorter": "^6.3.4",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-router-dom": "^5.3.4",
    "sort-by": "^0.0.2"
  },
  "devDependencies": {
    "@types/react": "^18.0.26",
    "@types/react-dom": "^18.0.9",
    "@vitejs/plugin-react": "^1.3.0",
    "autoprefixer": "^10.4.13",
    "postcss": "^8.4.20",
    "tailwindcss": "^3.2.4",
    "vite": "^4.0.0"
  }

Y de esta manera hago las rutas en el App.jsx :

import './App.css';
import React, { useEffect } from 'react';
import { BrowserRouter as Router, Switch, Route, Link } from "react-router-dom";

import Home from "./components/Home";
import Links from "/src/pages/Links.jsx";
import Contact from "/src/pages/Contact.jsx";
import Photos from "/src/pages/Photos.jsx";
import Work from "/src/pages/Work.jsx";


const App = () => {

  useEffect(() => {
    const disableRightClick = (event) => {
      event.preventDefault();
    };

    const handleContextMenu = (event) => {
      event.preventDefault();
    };

    document.addEventListener('contextmenu', handleContextMenu);

    return () => {
      document.removeEventListener('contextmenu', handleContextMenu);
    };
  }, []);
  return (
    <Router>
      <div className="App">
        <Switch>
          <Route path="/links">
            <Links></Links>
          </Route>
          <Route path="/contact">
            <Contact></Contact>
          </Route>
          <Route path="/photos">
            <Photos></Photos>
          </Route>
          <Route path="/work">
            <Work></Work>
          </Route>
          <Route path="/" exact >
            <Home></Home>
          </Route>
        </Switch>
      </div>
    </Router>
  )
}

export default App;

Este es el main.jsx :

import "./index.css";
import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter } from 'react-router-dom';
import App from './App';

ReactDOM.render(
  <BrowserRouter>
    <App />
  </BrowserRouter>,
  document.getElementById('root')
);

No se que es lo que falla. Antes tenía la versión 18 de React y me salía un error en la consola. Por eso he instalado la versión 17.

Muchas gracias.

1 respuesta 1

0

No lo he podido solucionar con react-router-dom, pero he encontrado una alternativa.

Desinstalar react-router-dom y instalar wouter.

Es un framework que va mejor y no me ha dado ningún problema.

Anteriormente ya había tenido problemas con react-router-dom: entraba en conflicto con FontAwesome.

Recomiendo Wouter es mejor y pesa menos.

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.