Navigating Programmatically
I've set the router DOM just for one page
import {Routes, Route} from 'react-router-dom';
import styles from './style';
import { Navbar, Hero, Stats,Business,Billing,CardDeal,
Testimonials,Clients,Job,CTA,Footer,
Resume, } from './components';
const App = () => {
return (
<div>
<div className="bg-primary w-full overflow-hidden">
<div className={`${styles.paddingX} ${styles.flexCenter}`}>
<div className={`${styles.boxWidth}`}>
<Navbar/>
</div>
</div>
</div>
<div className={`bg-primary ${styles.flexStart}`}>
<div className={`${styles.paddingX} ${styles.boxWidth}`}>
<Hero/>
</div>
</div>
<div className={`bg-primary ${styles.flexStart}`}>
<div className={`${styles.paddingX} ${styles.boxWidth}`}>
<Stats/>
<Business/>
<Billing/>
<Job/>
<CTA/>
<CardDeal/>
<Testimonials/>
<Clients/>
<Footer/>
</div>
</div>
<Routes>
<Route path='Resume' element={<Resume/>}/>
</Routes>
</div>
);
}
export default App;
import {Routes, Route} from 'react-router-dom';
import styles from './style';
import { Navbar, Hero, Stats,Business,Billing,CardDeal,
Testimonials,Clients,Job,CTA,Footer,
Resume, } from './components';
const App = () => {
return (
<div>
<div className="bg-primary w-full overflow-hidden">
<div className={`${styles.paddingX} ${styles.flexCenter}`}>
<div className={`${styles.boxWidth}`}>
<Navbar/>
</div>
</div>
</div>
<div className={`bg-primary ${styles.flexStart}`}>
<div className={`${styles.paddingX} ${styles.boxWidth}`}>
<Hero/>
</div>
</div>
<div className={`bg-primary ${styles.flexStart}`}>
<div className={`${styles.paddingX} ${styles.boxWidth}`}>
<Stats/>
<Business/>
<Billing/>
<Job/>
<CTA/>
<CardDeal/>
<Testimonials/>
<Clients/>
<Footer/>
</div>
</div>
<Routes>
<Route path='Resume' element={<Resume/>}/>
</Routes>
</div>
);
}
export default App;
1 Reply
From this page
I want to navigate here
import styles from '../style';
import Button from './Button';
import { useNavigate } from 'react-router-dom';
const CTA = () => {
const Navigate = useNavigate();
return (
<section className={`${styles.flexCenter} ${styles.marginY}
${styles.padding} sm:flex-row flex-col bg-black-gradient-2 rounded-[20px] box-shadow`}>
<div className='flex-1 flex flex-col'>
<h2 className={styles.heading2}>
Join Our Growing Team
</h2>
<p className={`${styles.paragraph} max-w-[470px] mt-5`}>
Explore how Sunflex Global Energy prioritizes the leveraging technology, we create a seamless and engaging journey for potential hires.
</p>
</div>
<div className={`${styles.flexCenter} sm:ml-10 ml-0
sm:mt-0 mt-10`}>
<a href="/Resume">
<Button onClick={()=> Navigate ('Resume')}>Send Your CV</Button>
</a>
</div>
</section>
)
}
export default CTA;
import styles from '../style';
import Button from './Button';
import { useNavigate } from 'react-router-dom';
const CTA = () => {
const Navigate = useNavigate();
return (
<section className={`${styles.flexCenter} ${styles.marginY}
${styles.padding} sm:flex-row flex-col bg-black-gradient-2 rounded-[20px] box-shadow`}>
<div className='flex-1 flex flex-col'>
<h2 className={styles.heading2}>
Join Our Growing Team
</h2>
<p className={`${styles.paragraph} max-w-[470px] mt-5`}>
Explore how Sunflex Global Energy prioritizes the leveraging technology, we create a seamless and engaging journey for potential hires.
</p>
</div>
<div className={`${styles.flexCenter} sm:ml-10 ml-0
sm:mt-0 mt-10`}>
<a href="/Resume">
<Button onClick={()=> Navigate ('Resume')}>Send Your CV</Button>
</a>
</div>
</section>
)
}
export default CTA;
const Resume = () => {
return (
<div>Resume</div>
)
}
export default Resume;
const Resume = () => {
return (
<div>Resume</div>
)
}
export default Resume;