reactjsreact-routerreact-router-domcreate-react-appconditional-rendering

How can i display only my Register component in my React app


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='&#9733; &#9733; &#9733; &#9733; &#9733;'
        price='$55.00'
        priceList='$65.00'
      />
      <SideStore2
      img='./JPEGS/SideStore2.webp'
      des='Wamboudin Ribeye'
      Star='&#9733; &#9733; &#9733; &#9733; &#9733;'
      price='$70.00'
      priceList='$84.00'
      />
      <SideStore2 
      img='./JPEGS/SideStore3.webp'
      des='Hrosciutto Kevincap'
      Star='&#9733; &#9733; &#9733; &#9733; &#9733;'
      price='$100.00'
      priceList=''
      />
      <SideStore2
      img='./JPEGS/SideStore4.webp'
      des='Cenison Meatloa'
      Star='&#9733; &#9733; &#9733; &#9733; &#9733;'
      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 &#9660;</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'>&#9660;</span>
            <ul>
              <li>
                {/* <HomeLayout/> */}
              </li>
              </ul> 
          </li>
          <li>Pages <span className='arrow'>&#9660;</span></li>
          <li>Blogs <span className='arrow'>&#9660;</span></li>
          <li>Shop <span className='arrow'>&#9660;</span></li>
          <li>Collection <span className='arrow'>&#9660;</span></li>
          <li>Marketplace <span className='arrow'>&#9660;</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.


Solution

  • Issues

    Solution

    1. Remove the Router import and use only the one BrowserRouter component.
    2. Move the other UI into a "home page" route.
    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;