0

我是反应和反应路由的新手。我正在建立一个网站。在路由时，我遇到了一些问题，因为我的主组件与顶部栏、导航栏、页脚和其他组件一起呈现在应用程序组件中。就像下面...

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;

这个 home 组件由一些子组件组成，如下所示......

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;

并且名为 BGCard 的主组件中的一个组件也有一些子组件。像下面...

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;

BGCard子组件的代码如下...

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;

因此，当我单击 BGCard 组件中的查看所有按钮时，我想渲染像 Aposetive 这样的组件（我有 8 个这样的组件）。这个 BGCard Components 正在作为一个部分呈现在 home 组件中。并且 home 组件正在使用我的主导航进行渲染和导航。所以我想在 app.js 中渲染 Aposetive 组件，就像 home 或任何其他组件一样。并希望使用 BGCard 组件作为辅助导航。我希望当我单击任何辅助导航链接时，它应该只使用顶部栏、导航栏、页脚和浮动小部件呈现。但相反，它在家里作为一个子部分呈现。我不知道如何解决这个问题。我试图同时在应用程序和家庭组件上呈现它。但没有运气。我不知道我是否解释得当。如果您需要有关此的任何其他信息，请询问。我非常需要帮助。提前致谢。

4

0 回答 0