• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

React Router - Link nie działa

VPS Starter Arubacloud
0 głosów
312 wizyt
pytanie zadane 30 maja 2022 w JavaScript przez Zaqu93 Gaduła (4,850 p.)

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ę.

komentarz 30 maja 2022 przez ScriptyChris Mędrzec (190,190 p.)

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

komentarz 30 maja 2022 przez Zaqu93 Gaduła (4,850 p.)
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
komentarz 30 maja 2022 przez ScriptyChris Mędrzec (190,190 p.)

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

komentarz 30 maja 2022 przez Zaqu93 Gaduła (4,850 p.)
W codesanbox tak ale mając identyczny kod postawiony u siebie nie działa
komentarz 30 maja 2022 przez ScriptyChris Mędrzec (190,190 p.)

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

komentarz 30 maja 2022 przez Zaqu93 Gaduła (4,850 p.)
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/

1 odpowiedź

+1 głos
odpowiedź 30 maja 2022 przez ScriptyChris Mędrzec (190,190 p.)
wybrane 30 maja 2022 przez Zaqu93
 
Najlepsza

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.

komentarz 30 maja 2022 przez Zaqu93 Gaduła (4,850 p.)
faktycznie nawet bym nie doszedł że to jest problemem. to dlatego na codesanbox strona jest rozwalona dziękuję bardzo.

Podobne pytania

0 głosów
2 odpowiedzi 232 wizyt
pytanie zadane 13 kwietnia 2021 w JavaScript przez Trekeren Początkujący (370 p.)
0 głosów
1 odpowiedź 112 wizyt
0 głosów
0 odpowiedzi 192 wizyt
pytanie zadane 7 sierpnia 2022 w JavaScript przez ferdynand Obywatel (1,250 p.)

92,452 zapytań

141,262 odpowiedzi

319,077 komentarzy

61,854 pasjonatów

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj.

Akademia Sekuraka

Akademia Sekuraka 2024 zapewnia dostęp do minimum 15 szkoleń online z bezpieczeństwa IT oraz dostęp także do materiałów z edycji Sekurak Academy z roku 2023!

Przy zakupie możecie skorzystać z kodu: pasja-akademia - użyjcie go w koszyku, a uzyskacie rabat -30% na bilety w wersji "Standard"! Więcej informacji na temat akademii 2024 znajdziecie tutaj. Dziękujemy ekipie Sekuraka za taką fajną zniżkę dla wszystkich Pasjonatów!

Akademia Sekuraka

Niedawno wystartował dodruk tej świetnej, rozchwytywanej książki (około 940 stron). Mamy dla Was kod: pasja (wpiszcie go w koszyku), dzięki któremu otrzymujemy 10% zniżki - dziękujemy zaprzyjaźnionej ekipie Sekuraka za taki bonus dla Pasjonatów! Książka to pierwszy tom z serii o ITsec, który łagodnie wprowadzi w świat bezpieczeństwa IT każdą osobę - warto, polecamy!

...