我一直在尝试显示我的反应应用程序的寄存器组件，其中包含注册表单。然而，我没能成功，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;
这是我的
FirstSectionRegisterimport 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>
首先，我尝试使用条件渲染环，但它不起作用。通过条件渲染甚至反应路由，寄存器组件与我的整个网页内容一起显示，而我只想它与一些选定的内容（例如导航栏）一起显示。
这是我在所有项目中使用的解决方案，以实现此目标。
这就是我的 App.tsx 的样子：
import { Routes, Route, Navigate } from "react-router-dom";
import {useState} from "react";
function App() {
const isAuthenticated = useState(true)
const ProtectedRoute = ({ isAuthenticated, children }) => {
if (!isAuthenticated) {
return <Navigate to="/login" replace />;
}
return children;
};
return (
<Routes>
<Route path="/login" element={<Login />} />
<Route path="/register" element={<Register />} />
<Route path="*" element={
<ProtectedRoute isAuthenticated={isAuthenticated}>
<Routes>
<Route path="/" element={<MainPage/>} />
<Route path="/contact" element={<Contact/>} />
<Route path="/test" element={<Test/>} />
<Route path="*" element={ <Navigate to="/404" replace />} />
</Routes>
</ProtectedRoute>
} />
</Routes>
)
}
对于一些解释，我们有第一个路由器，它会检查用户是否正在尝试访问登录或注册页面，然后渲染相应的 DOM（在 element 属性中提供）。
然后所有其他请求 (*) 进入受保护的路由，检查用户是否经过身份验证，如果没有，则将其重定向到登录页面。然后我们有第二个具有相同逻辑的路由器。
我比你问的更进一步，因为我认为这会对你有所帮助，但总之......你的所有页面都出现在你的注册表单之后，因为你没有将你的网站内容放在特定的路径中你的路由器。