我一直在try 显示我的Reaction应用程序的注册组件，它由注册表单组成.然而，我一直未能成功，YouTube上的视频让我更困惑.下面是我的App.JS，其中我有许多呈现的组件:
import React, { useState } from 'react';
import { createBrowserRouter, Router, Route, createRoutesFromElements, RouterProvider } from "react-router-dom";
import FirstSection from './components/FirstSection.jsx';
import SideContents from './components/SideContents.jsx';
import Discount from './components/Discount.jsx';
import Deals from './components/Deals.jsx';
import Trends from './components/Trends.jsx';
import Store from './components/Store.jsx';
import SideStore from './components/SideStore.jsx';
import SideStore2 from './components2/SideStore2.jsx';
import SideStore3 from './components2/SideStore3.jsx';
import Bonuses from './components2/Bonuses.jsx';
import NewItems from './components2/NewItems.jsx';
import TopRated from './components2/TopRated.jsx';
import Register from './components3/Register.jsx';
// import Login from './components3/Login.jsx';
function App() {
const router = createBrowserRouter(
createRoutesFromElements(
<Route>
<Route path='/Register' element={<Register />} />
</Route>
)
)
return (
<Router>
<div>
<div className='Main'>
<FirstSection/>
<div className='content'>
<SideContents shopIcon='' list='Gift & Toys' />
<SideContents shopIcon='' list='Electronics' />
<SideContents shopIcon='' list='Fashion $ Accessories' />
<SideContents shopIcon='' list='Bags & Shoes' />
<SideContents shopIcon='' list='Optimum Electronics' />
<SideContents shopIcon='' list='Bathroom' />
<SideContents shopIcon='' list='Health & Beauty' />
<SideContents shopIcon='' list='Home & Lights' />
<SideContents shopIcon='' list='Metallurgy' />
<SideContents shopIcon='' list='Bedroom' />
<SideContents shopIcon='' list='Industrial parts' />
<SideContents shopIcon='' list='More Categories ' />
<Discount />
<div className='DealsSection'>
<Deals
img='./images/Deal-1.webp'
items='Yutculpa Ullamco'
price='$60.00'
Available='Available:' quantityLeft='91'
unavailable='Sold:' quantitySold='39'
timeout=''
/>
<Deals
img='./images/Deal-2.webp'
items='Wamboudin Ribeye'
price='$70.00'
Available='Available:' quantityLeft='94'
unavailable='Sold:'quantitySold='66'
timeout=''
/>
</div>
<Trends />
<div className='store-deals'>
<Store
img='./pictures/store1.webp'
description='Sausage cowbee'
star=''
price='$0.00'
/>
<Store
img='./pictures/store2.webp'
description='Kielbasa hamburg'
star=''
price='$55.00'
/>
<Store
img='./pictures/store3.webp'
description='Chicken swinesha'
star=''
price='$56.00'
/>
<Store
img='./pictures/store4.webp'
description='Cenison meatloa'
star=''
price='$50.00'
/>
<Store
img='./pictures/store5.webp'
description='Drumstick tempor'
star=''
price='$65.00'
/>
</div>
<div className='StoredDeals'>
<Store
img='./pictures/store6.webp'
description='Pastrami bacon'
star=''
price='$42.00'
/>
<Store
img='./pictures/store7.webp'
description='Priodent leerkas'
star=''
price='$55.00'
/>
<Store
img='./pictures/store8.webp'
description='Consectur quichuck'
star=''
price='$61.00'
/>
<Store
img='./pictures/store9.webp'
description='Balltip nullaelit'
star=''
price='$55.00'
/>
<Store
img='./pictures/store10.webp'
description='Neatball bresaola'
star=''
price='$71.00'
/>
</div>
<SideStore />
<div className='StoreTwo'>
<SideStore2
img='./JPEGS/SideStore1.webp'
des='Balltip Nullaelit'
Star='★ ★ ★ ★ ★'
price='$55.00'
priceList='$65.00'
/>
<SideStore2
img='./JPEGS/SideStore2.webp'
des='Wamboudin Ribeye'
Star='★ ★ ★ ★ ★'
price='$70.00'
priceList='$84.00'
/>
<SideStore2
img='./JPEGS/SideStore3.webp'
des='Hrosciutto Kevincap'
Star='★ ★ ★ ★ ★'
price='$100.00'
priceList=''
/>
<SideStore2
img='./JPEGS/SideStore4.webp'
des='Cenison Meatloa'
Star='★ ★ ★ ★ ★'
price='$50.00'
priceList='$62.00'
/>
</div>
<SideStore3 />
<Bonuses />
<NewItems />
<RouterProvider router={router} />
<div className='footer'>
<TopRated />
</div>
</div>
</div>
</div>
</Router>
)
}
export default App;
这是我的FirstSection组件，其中有一个文本"登录或注册"，我希望当我点击"注册"时，它会将我带到Register组件:
import React, {component} from 'react';
import './FirstSection.css';
import { Link, Route, Routes } from "react-router-dom";
import Register from "../components3/Register";
// import LoginOrRegister from "../components3/LoginOrRegister";
function FirstSection () {
return (
<>
<div className='Header'>
<p
className='First-row-par'><b>Welcome to Emarket!</b>Wrap new offers/gift every single day on Weekends - New Coupon code: Happy 2017 <span className='First-row'> <img src="Eng%20icon.png" alt=""/>English</span> <span className='First-row'> $US Dollar ▼</span>
</p>
<hr></hr>
<div className='list-items-1'>
<span className='Img-logo'> <img src="logo.png" alt="" /> </span>
<div className='list-items-2'>
<ul className='list-items'>
<li>Home <span className='arrow'>▼</span>
<ul>
<li>
{/* <HomeLayout/> */}
</li>
</ul>
</li>
<li>Pages <span className='arrow'>▼</span></li>
<li>Blogs <span className='arrow'>▼</span></li>
<li>Shop <span className='arrow'>▼</span></li>
<li>Collection <span className='arrow'>▼</span></li>
<li>Marketplace <span className='arrow'>▼</span></li>
<span className='sign-up'> <Link to="/Login">Login</Link>or <Link to="/Register">Register</Link></span>
首先，我try 使用条件渲染，但不起作用.使用有条件的渲染，甚至Reaction路由，注册组件与我的整个Web内容一起显示，而我只想让它与一些选定的内容一起显示，比如导航栏.