React Router - Link nie działa

Question

Cześć wszystkim.

Uczę się Reacta i piszę sobie małą stronkę wykorzystującą między innymi React Router. Link do elementu Register nie działa. Podejrzewam że ma to związek z tym że link ten jest w komponencie Hero który jest obsługiwany przez router, moje pytanie brzmi jak sprawić żeby ten link do "/Register" działał poprawnie:

App.js

import Nav from './components/Nav';
import Account from './components/Account';
import Hero from './components/Hero';
import Footer from './components/Footer';
import { Routes, Route } from "react-router-dom";
import Contact from './router/Contact';
import About from './router/About';
import Register from './router/Register';

const App = () => {
  return (
    <>
      <Nav></Nav>
      <Account></Account>
      <div className="flex">
        <Routes>
          <Route path="/" element={<Hero></Hero>}/>
          <Route path="/Contact" element={<Contact/>} />
          <Route path="/About" element={<About/>} />
          <Route path="/Register" element={<Register/>}/>
        </Routes>{/* TODO: make proper anim on page redirect */}
        <Footer></Footer>
      </div>
    </>
  );
}

export default App;

Hero.js

import { Link } from "react-router-dom";

const Hero = () => {
    return ( 
        <main className="content">
            <header className="header">
                <h1>Calander.io</h1>
            </header>
            <article className="desc">
                <p>Manage your day with Us.</p>
                <p>
                    Try Calander by 
                    clicking on this button:
                </p>
            </article>
            <Link to="/Contact" className="heroBtn">
                <span type="button" className="heroBtnInput">TRY FRO FREE</span>
                <div className="shadow"></div>
            </Link>
        </main>
     );
}
 
export default Hero;

Register.js

const Register = () => {
    return ( 
        <main className="content contact">
            <div className="inner">
                <h1>Register</h1>
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Repudiandae aspernatur perferendis non id, numquam dolorem pariatur qui quae distinctio deleniti quasi magni doloremque voluptates accusamus voluptatibus dolores nesciunt officiis incidunt?
            </div>
            <div className="decor"></div>
        </main>
     );
}
 
export default Register;

Wydaje mi się że problem leży w tym że link przenoszący do komponentu Register leży wewnątrz komponentu Hero i dlatego link nie działa, nie wiem jednak jak sprawić żeby to działało poprawnie. Dziękuję za każdą radę.

Comments

Możesz udostępnić testowalną wersję na https://codesandbox.io?

---

Jak to postawiłem na codesanbox to link nagle działa tak jak powinnien natomiast ten sam kod u mnie nie działa.

https://1r4dut.csb.app

---

Kliknięcie w link "TRY FRO FREE" przenosi na podstronę /Register, więc chyba działa?

---

W codesanbox tak ale mając identyczny kod postawiony u siebie nie działa

---

Spróbuj odświeżyć stronę z pominięciem cache: Ctrl + F5 lub Ctrl + Shift + R.

---

Postawiłem stronę na netlify i nie działa. Odświeżanie strony nie daje nic. Jest to co najmniej dziwne bo kod został dosłownie skopiowany i na codesanbox działa u mnie i na netlify nie

https://calander-io.netlify.app/

Answer 1

Jest różnica w kodzie. Na sandboxie główny div ma id "root", a na Netlify ma klasę o takiej nazwie. Klasa ta aplikuje styl, który powoduje, że ten div rozciąga się na całą wysokość okna viewportu, przez co przesłania środek strony (m.in. tam jest link do rejestracji), bo ten ma ujemny z-index i jest pozycjonowany absolutnie.

Comments

faktycznie nawet bym nie doszedł że to jest problemem. to dlatego na codesanbox strona jest rozwalona dziękuję bardzo.