I have been trying to display the register component of my react app which comprises of register forms. However, I have not been able to succeed and the youtube videos are confusing me more. Here is my App.JS where i have many rendered components:
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;
Here is my FirstSection
component where i have a text "Login or Register" and i want when i click on "Register" it takes me to the Register
component:
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>
First, i tried using conditional renderring but it was not working. With the conditional rendering and even the react routing, the register component was displaying alongside my entire web contents whereas i just wanted it to display with some selected contents like the navbar.
Router
component and not passing it required props.BrowserRouter
via RouterProvider
that only renders the one "/register"
route.RouterProvider
.Router
import and use only the one BrowserRouter
component.import React, { useState } from 'react';
import { createBrowserRouter, 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';
const Home = () => (
<div>
<div className='Main'>
<FirstSection />
<div className='content'>
....
<Discount />
<div className='DealsSection'>
....
</div>
<Trends />
<div className='store-deals'>
....
</div>
<div className='StoredDeals'>
....
</div>
<SideStore />
<div className='StoreTwo'>
....
</div>
<SideStore3 />
<Bonuses />
<NewItems />
<div className='footer'>
<TopRated />
</div>
</div>
</div>
</div>
);
const router = createBrowserRouter([
{
path: "/",
element: <Home />,
},
{
path: "/register",
element: <Register />,
},
]);
function App() {
return <RouterProvider router={router} />;
}
export default App;