Skip to main content
3 de 3
se añadieron 41 caracteres en el cuerpo

Problemas en el enrutamiento React Router Dom

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.