I'm new to react and react routing. I'm building a website. and while routing, I'm facing some problems as my home component is rendered in the app components along with the topbar, navbar, footer, and others components. Like below...
import React from 'react';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
import 'owl.carousel/dist/assets/owl.carousel.css';
import 'owl.carousel/dist/assets/owl.theme.default.css';
import Topbar from '../components/Topbar/Topbar';
import Navbar from '../components/Navbar/Navbar';
import Home from '../components/Home/Home';
import Login from '../components/Login/Login';
import Register from '../components/Register/Register';
import About from '../components/About/About';
import Blog from '../components/Blog/Blog';
import Contact from '../components/Contact/Contact';
import Donors from '../components/Donors/Donors';
import JoinAsDonor from '../components/JoinAsDonor/JoinAsDonor';
import RecentDonors from '../components/Home/RecentDonors/RecentDonors';
import Profile from '../components/Profile/Profile';
import Recovery from '../components/Recovery/Recovery';
import Volunteer from '../components/Volunteer/Volunteer';
import ErrorPage from '../components/ErrorPage/ErrorPage';
import Footer from '../components/Footer/Footer';
import FloatingWidget from '../components/FloatingWidget/FloatingWidget';
import './App.css';
// import Anegetive from '../components/Home/BGCard/A-/A-';
// import Aposetive from '../components/Home/BGCard/A+/A+';
// import ABnegetive from '../components/Home/BGCard/AB-/AB-';
// import ABposetive from '../components/Home/BGCard/AB+/AB+';
// import Bnegetive from '../components/Home/BGCard/B-/B-';
// import Bposetive from '../components/Home/BGCard/B+/B+';
// import Onegetive from '../components/Home/BGCard/O-/O-';
// import Oposetive from '../components/Home/BGCard/O+/O+';
function App() {
return (
<Router>
<Topbar />
<Navbar />
<Switch>
<Route>
<Route exact path='/' component={Home} />
{/* <Route exact path='/a-' component={Anegetive} />
<Route exact path='/a+' component={Aposetive} />
<Route exact path='/ab-' component={ABnegetive} />
<Route exact path='/ab+' component={ABposetive} />
<Route exact path='/b-' component={Bnegetive} />
<Route exact path='/b+' component={Bposetive} />
<Route exact path='/o-' component={Onegetive} />
<Route exact path='/o+' component={Oposetive} />
<Route component={ErrorPage} /> */}
</Route>
<Route exact path='/about' component={About} />
<Route exact path='/volunteer' component={Volunteer} />
<Route exact path='/donors' component={Donors} />
<Route exact path='/blog' component={Blog} />
<Route exact path='/contact' component={Contact} />
<Route exact path='/join-donor' component={JoinAsDonor} />
<Route exact path='/recent-donors' component={RecentDonors} />
<Route exact path='/recent-donors/donor-profile/:id/:name' component={Profile} />
<Route exact path='/recovery' component={Recovery} />
<Route exact path='/login' component={Login} />
<Route exact path='/register' component={Register} />
<Route component={ErrorPage} />
</Switch>
<Footer />
<FloatingWidget />
</Router>
);
}
export default App;and this home component is made of some child components like below ...
import React from 'react';
import { BrowserRouter as Router, Switch, Route } from 'react-router-dom';
import Header from './Header/Header';
import SearchBox from './SearchBox/SearchBox';
import DonationProcess from './DonationProcess/DonationProcess';
import BGCard from './BGCard/BGCard';
import ReqBGInfo from './ReqBGInfo/ReqBGInfo';
import RecentDonors from './RecentDonors/RecentDonors';
import Motivation from './Motivation/Motivation';
import Volunteers from './Volunteers/Volunteers';
import Counter from './Counter/Counter';
import Testimonial from './Testimonial/Testimonial';
import CTA from './CTA/CTA';
import News from './News/News';
import Profile from '../Profile/Profile';
import JoinAsDonor from '../../components/JoinAsDonor/JoinAsDonor';
import Contact from '../../components/Contact/Contact';
import Anegetive from './BGCard/A-/A-';
import Aposetive from './BGCard/A+/A+';
import ABnegetive from './BGCard/AB-/AB-';
import ABposetive from './BGCard/AB+/AB+';
import Bnegetive from './BGCard/B-/B-';
import Bposetive from './BGCard/B+/B+';
import Onegetive from './BGCard/O-/O-';
import Oposetive from './BGCard/O+/O+';
import ErrorPage from '../../components/ErrorPage/ErrorPage';
const Home = () => {
return (
<Router>
<Header />
<Switch>
<Route exact path='/contact' component={Contact} />
<Route exact path='/join-donor' component={JoinAsDonor} />
</Switch>
<SearchBox />
<DonationProcess />
<BGCard />
<Switch>
<Route exact path='/a-' component={Anegetive} />
<Route exact path='/a+' component={Aposetive} />
<Route exact path='/ab-' component={ABnegetive} />
<Route exact path='/ab+' component={ABposetive} />
<Route exact path='/b-' component={Bnegetive} />
<Route exact path='/b+' component={Bposetive} />
<Route exact path='/o-' component={Onegetive} />
<Route exact path='/o+' component={Oposetive} />
<Route component={ErrorPage} />
</Switch>
<ReqBGInfo />
<RecentDonors />
<Motivation />
<Volunteers />
<Switch>
<Route exact path='/profile' component={Profile} />
</Switch>
<Counter />
<Testimonial />
<CTA />
<News />
</Router>
);
};
export default Home;and also one of the components from the home component named BGCard has some child components. Like below ...
import React from 'react';
import { NavLink } from 'react-router-dom';
const BGCard = () => {
return (
<section className="our-valuable-donor-area padding-bottom-90">
<div className="container">
<div className="row justify-content-center">
<div className="col-lg-8">
<div className="section-title margin-bottom-60">
<h2 className="title">Our Available Donors</h2>
<span className="separator"></span>
</div>
</div>
</div>
<div className="row">
<div className="col-lg-3 col-md-6">
<div className="single-donor-group-item">
<div className="icon">
<span className="blood-group">A+</span>
</div>
<div className="btn-wrapper">
<NavLink to="/a+" className="boxed-btn">View All</NavLink>
</div>
</div>
</div>
<div className="col-lg-3 col-md-6">
<div className="single-donor-group-item">
<div className="icon">
<span className="blood-group">A-</span>
</div>
<div className="btn-wrapper">
<NavLink to="/a-" className="boxed-btn">View All</NavLink>
</div>
</div>
</div>
<div className="col-lg-3 col-md-6">
<div className="single-donor-group-item">
<div className="icon">
<span className="blood-group">O+</span>
</div>
<div className="btn-wrapper">
<NavLink to="/o+" className="boxed-btn">View All</NavLink>
</div>
</div>
</div>
<div className="col-lg-3 col-md-6">
<div className="single-donor-group-item">
<div className="icon">
<span className="blood-group">O-</span>
</div>
<div className="btn-wrapper">
<NavLink to="/o-" className="boxed-btn">View All</NavLink>
</div>
</div>
</div>
<div className="col-lg-3 col-md-6">
<div className="single-donor-group-item">
<div className="icon">
<span className="blood-group">B+</span>
</div>
<div className="btn-wrapper">
<NavLink to="/b+" className="boxed-btn">View All</NavLink>
</div>
</div>
</div>
<div className="col-lg-3 col-md-6">
<div className="single-donor-group-item">
<div className="icon">
<span className="blood-group">B-</span>
</div>
<div className="btn-wrapper">
<NavLink to="/b-" className="boxed-btn">View All</NavLink>
</div>
</div>
</div>
<div className="col-lg-3 col-md-6">
<div className="single-donor-group-item">
<div className="icon">
<span className="blood-group">AB+</span>
</div>
<div className="btn-wrapper">
<NavLink to="/ab+" className="boxed-btn">View All</NavLink>
</div>
</div>
</div>
<div className="col-lg-3 col-md-6">
<div className="single-donor-group-item">
<div className="icon">
<span className="blood-group">AB-</span>
</div>
<div className="btn-wrapper">
<NavLink to="/ab-" className="boxed-btn">View All</NavLink>
</div>
</div>
</div>
</div>
</div>
</section>
);
};
export default BGCard;and the code of BGCard's child component is like below...
import React from 'react';
import '../../../../containers/App.css';
import dp from '../../../Donors/Donor.png';
import { NavLink } from 'react-router-dom';
const Aposetive = () => {
return (
<>
<div className='breadcrumb-area'>
<div className='container'>
<div className='row'>
<div className='col-lg-12'>
<div className='breadcrumb-inner'>
<h2 className='page-title'>
{' '}
All Available Donors In A+
</h2>
<ul className='page-list'>
<li>
<NavLink to='/'>Home</NavLink>
</li>
<li>
<NavLink to='/a+'>
{' '}
All Available Donors In A+
</NavLink>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<section className='dedicated-team-area padding-120 '>
<div className='container'>
<div className='row'>
<div className='col-lg-12'></div>
<div className='col-lg-3 col-md-6'>
<div className='single-donors-item margin-bottom-30'>
<div className='thumb'>
<img
src={dp}
alt='dp'
/>
</div>
<div className='content'>
<NavLink to='/donor-profile/17/nannie-jude'>
{' '}
<h4 className='title'>Nannie Jude</h4>
</NavLink>
<span className='blood-group'>
Blood Group: <strong>A+</strong>
</span>
<span className='total-donate'>
Total Donate: <strong>0</strong> Times
</span>
</div>
</div>
</div>
<div className='col-lg-3 col-md-6'>
<div className='single-donors-item margin-bottom-30'>
<div className='thumb'>
<img
src={dp}
alt='dp'
/>
</div>
<div className='content'>
<NavLink to='/donor-profile/9/charles-beckham'>
{' '}
<h4 className='title'>Charles Beckham</h4>
</NavLink>
<span className='blood-group'>
Blood Group: <strong>A+</strong>
</span>
<span className='total-donate'>
Total Donate: <strong>1</strong> Times
</span>
</div>
</div>
</div>
<div className='col-lg-3 col-md-6'>
<div className='single-donors-item margin-bottom-30'>
<div className='thumb'>
<img
src={dp}
alt='dp'
/>
</div>
<div className='content'>
<NavLink to='/donor-profile/7/susan-shaw'>
{' '}
<h4 className='title'>Susan Shaw</h4>
</NavLink>
<span className='blood-group'>
Blood Group: <strong>A+</strong>
</span>
<span className='total-donate'>
Total Donate: <strong>1</strong> Times
</span>
</div>
</div>
</div>
<div className='col-lg-12'>
<nav
className='pagination-wrapper'
ariaLabel='Page navigation '
></nav>
</div>
</div>
</div>
</section>
</>
);
};
export default Aposetive;So I want to render The component like Aposetive (I have 8 components like this) when I click the view all button in BGCard components. And this BGCard Components is being rendered in the home component as a section. and home component is being rendered and navigated using my primary navigation. So I want to render the Aposetive component in the app.js like home or any other component. and want to use the BGCard component as secondary navigation. and I want when I click any of my secondary navigation links it should be rendered only with topbar, navbar, footer, and floating widget. but instead, it's being rendered in the home as a sub-section. I don't know how to solve this problem. I've tried to render it on both app and home components simultaneously. But had no luck. I don't know if I explained it properly. If you need any other information about this, then please ask. I badly need the help. thanks in advance.
