AnthonyOnah
September 19, 2023
129 views
1 vote
2 Answers

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.

Answers

Here’s the solution I use in all my projects in order to achieve this goal.

This is what my App.tsx looks like :

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>
    )
}

For some explanations, we have a first router that looks if the user is trying to access login or register page, then render the corresponding DOM (provided in element property).

Then all other requests (*) goes into a Protected route that check if user isAuthenticated, and if not redirect him to the Login page. And then we have a second router with the same logic.

I’ve been a bit further than what you asked because I thought it would help you, but in conclusion… all your page appear after your Register form because you haven’t put the content of your website in a specific route of your Router.

Issues

You are rendering the base Router component and not passing it required props.
You are rendering a nested BrowserRouter via RouterProvider that only renders the one "/register" route.
You are unconditionally rendering the rest of the app content above the RouterProvider.

Solution

Remove the Router import and use only the one BrowserRouter component.
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;

Please signup or login to give your own answer.

Click here to cancel reply.

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

Answers

Issues

Solution