do not runder component on login

bassam malla 0
Viewed 37

I am new with react I follow a course with typescript, but after I create components in the course he display it in all routers I need to not display in login page only is there any way to achieve that here part from my code in App.tsx

import React from 'react';
import logo from './logo.svg';
import './App.css';
import {Login} from "./components/Login";
import {Nav} from "./components/Nav";
import {Home} from "./components/Home";
import {BrowserRouter, Routes, Route} from "react-router-dom";

function App() {
return <BrowserRouter>
<Nav/>
<Routes>
 <Route path="/login" element = {<Login/>} />
<Route path="/" element = {<Home/>} />
</Routes>

</BrowserRouter>;
}

the Nav component is the component I need to not show in Login component thanks in advance

tsx reactjs typescript
1 Answers

You can do it by creating a new folder as a page named Home, About,... ... . Import components in these new components. Don't import Navbar where it is not necessary. Sample code:

function Home() {
  return (
      <div>
        <Navbar></Navbar>
        <Banner></Banner>
        <Info></Info>
      </div>

function Login() {
  return (
      <div>
        <Banner1></Banner1>
        <Info1></Info1>
      </div>

Finally, import Home and Login in the app.js function.

function App() {
  return (
      <Routes>
        <Route path="/" element={<Home/>} />
        <Route path="/home" element={<Home/>} />
        <Route path="/login" element={<Login />} />
     </Routes>

Hope it would work.

Pabel Mahbub0
Related