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