Implement Comprehensive Routing Structure in React Application

[samar12-rad]

This issue aims to establish a comprehensive routing structure in the React application using react-router-dom. This will involve creating a WrappedApp component to manage routing context, defining routes for all application pages, and conditionally rendering the navigation bar based on the current route.

Background
Currently, the application may not have a well-defined routing strategy, potentially leading to navigation issues and a poor user experience. By implementing a structured routing setup, we can ensure seamless navigation across different pages while maintaining accessibility to routing features and components.

Requirements

Create WrappedApp Component:
Define a WrappedApp component that wraps the main App component with BrowserRouter.
Export WrappedApp for rendering in the main entry file (usually index.js).
Define Application Routes:

Implement routes for the following pages:
Home (/)
About (/about)
Create (/create)
Join (/join)
Explore (/explore)
Login (/login)
Signup (/signup)

Conditional Rendering of Navigation Bar:
Implement logic to show or hide the navigation bar based on the current route. The navbar should be visible on Home, About, Create, Join, and Explore routes, but hidden on Login and Signup routes.

Testing and Validation:
Ensure that all defined routes are functional and render the correct components.
Test the navigation functionality to confirm that clicking on the navbar items navigates to the respective pages.
Validate that the navigation bar correctly shows or hides based on the route.