So basically I have a navbar that switches between routes. When the page loads, it goes to my localhost by default but doesn’t actually render the App component it’s being given. I believe the problem is within the navbar as the app renders other components when the Nav component is not included. Please assist me if you can.
code to the questions is given below:
app.js
import React from 'react';
import './App.css';
import Nav from './components/Navbar/navbar';
import Content from './components/Header/firstsec';
import Grid from './components/secondsec/secondsec';
import Footer from './components/footer/footer';
import Sign from './components/signin/signin';
import Trend from './components/trending/trending';
function App() {
return (
<div>
<Nav/>
<Content />
<Grid />
<Footer />
<Sign />
<Trend />
</div>
);
}
export default App;
navbar.js
import React from "react";
import {
BrowserRouter as Router,
Route,
Routes,
Link} from "react-router-dom";
import Content from "../Header/firstsec";
import Grid from "../secondsec/secondsec";
import Trend from "../trending/trending";
import Sign from "../signin/signin";
import { Component } from "react/cjs/react.development";
export default class Nav extends Component{
render(){
return (
<Router>
<div>
<nav className="bg-gradient-to-r from-blue-300 to to-purple-500 via-black">
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-6">
<div className="flex items-center justify-between h-36">
<div className="flex items-center">
<div className="flex-shrink-0">
<img
className="h-8 w-8"
src="https://tailwindui.com/img/logos/workflow-mark-indigo-500.svg"
alt="Workflow"
/>
</div>
<div className="hidden md:block">
<div className="ml-10 flex items-baseline space-x-4">
<Nav.Link as={Link} to ={"/"}
className=" hover:bg-gray-700 text-white px-3 py-2 rounded-md text-sm font-medium"
>
Bloow
</Nav.Link>
<Nav.Link as={Link} to ={"/Content"}
className="text-gray-300 hover:bg-gray-700 hover:text-white px-3 py-2 rounded-md text-sm font-medium">
Bloow TV
</Nav.Link>
<Nav.Link as={Link} to ={"/Grid"}
className="text-gray-300 hover:bg-gray-700 hover:text-white px-3 py-2 rounded-md text-sm font-medium"
>
Bloow Music
</Nav.Link>
<Nav.Link as={Link} to ={"/Trending"}
className="text-gray-300 hover:bg-gray-700 hover:text-white px-3 py-2 rounded-md text-sm font-medium"
>
Trending
</Nav.Link>
<div>
<Nav.Link as={Link} to ={"/Sign"}
className="text-gray-300 hover:bg-gray-700 hover:text-white px-3 py-2 rounded-md text-sm font-medium"
>
Sign in
</Nav.Link>
</div>
</div>
</div>
<div className="-mr-2 flex md:hidden">
<button
type="button"
className="bg-gray-800 inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-white hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-800 focus:ring-white"
aria-controls="mobile-menu"
aria-expanded="false"
>
<span className="sr-only">Open main menu</span>
<svg
className="block h-6 w-6"
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
aria-hidden="true"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M4 6h16M4 12h16M4 18h16"
/>
</svg>
<svg
className="hidden h-6 w-6"
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
aria-hidden="true"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M6 18L18 6M6 6l12 12"
/>
</svg>
</button>
</div>
</div>
</div>
</div>
<div className="md:hidden" id="mobile-menu">
<div className="px-2 pt-2 pb-3 space-y-1 sm:px-3">
<Nav.Link as={Link} to ={"/home"}
className="hover:bg-gray-700 text-white block px-3 py-2 rounded-md font-medium text-5xl"
>
Bloow
</Nav.Link>
<Nav.Link as={Link} to ={"/Content"}
className="text-gray-300 hover:bg-gray-700 hover:text-white block px-3 py-2 rounded-md text-base font-medium"
>
Bloow TV
</Nav.Link>
<Nav.Link as={Link} to ={"/Grid"}
className="text-gray-300 hover:bg-gray-700 hover:text-white block px-3 py-2 rounded-md text-base font-medium"
>
Bloow Music
</Nav.Link>
<Nav.Link as={Link} to ={"/Trending"}
className="text-gray-300 hover:bg-gray-700 hover:text-white block px-3 py-2 rounded-md text-base font-medium"
>
Trending
</Nav.Link>
<Nav.Link as={Link} to ={"/Sign"}
className="text-gray-300 hover:bg-gray-700 hover:text-white block px-3 py-2 rounded-md text-base font-medium"
>
Sign in
</Nav.Link>
</div>
</div>
</nav>
</div>
<div>
<Routes>
<Route path="/" Component ={Content} />
<Route path="/Content" Component ={Content}>
</Route>
<Route path="/Grid" Component ={Grid}>
<Grid />
</Route>
<Route path="/Trending" Component={Trend}>
<Trend />
</Route>
<Route path="/Sign" Component={Sign}>
<Sign />
</Route>
</Routes>
</div>
</Router>
);
}
}