https://github.com/rishika105/react-router-project
A webpage that contains login, signup, home pages for the clear depiction of how router works in reactjs. Also used tailwind configuration for styling purposes.
https://github.com/rishika105/react-router-project
react-router reactjs tailwind
Last synced: 2 months ago
JSON representation
A webpage that contains login, signup, home pages for the clear depiction of how router works in reactjs. Also used tailwind configuration for styling purposes.
- Host: GitHub
- URL: https://github.com/rishika105/react-router-project
- Owner: rishika105
- Created: 2024-05-12T12:56:24.000Z (about 1 year ago)
- Default Branch: main
- Last Pushed: 2024-09-01T05:33:40.000Z (9 months ago)
- Last Synced: 2025-02-13T06:43:01.331Z (4 months ago)
- Topics: react-router, reactjs, tailwind
- Language: JavaScript
- Homepage: https://react-webpage-router-depiction.netlify.app/
- Size: 1.18 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# React Router Project
This project is a demonstration of routing between different components and pages using React Router. It includes components for forms, navigation, and route protection, along with several pages like `Home`, `Dashboard`, `Login`, and `Signup`.
## Project Structure
### Components
- **LoginForm.js**: Handles the login form.
- **SignupForm.js**: Manages the signup form.
- **Navbar.js**: Contains the navigation bar for navigating between different routes.
- **PrivateRoute.js**: A higher-order component that guards private routes, ensuring that only authenticated users can access them.
- **Template.js**: Acts as a layout component for wrapping other components or pages.
### Pages
- **Dashboard.js**: The dashboard page, accessible only after logging in.
- **Home.js**: The homepage of the application.
- **Login.js**: The page that contains the `LoginForm` component for user authentication.
- **Signup.js**: The page that contains the `SignupForm` component for new user registration.
## Installation
### Prerequisites
- **Node.js**: Ensure you have Node.js installed. You can download it from [here](https://nodejs.org/).
### Steps
1. **Clone the repository**:
```bash
git clone
```
2. **Navigate to the project directory**:
```bash
cd react-router-project
```
3. **Install dependencies**:
```bash
npm install
```
## Running the Project
1. **Start the development server**:
```bash
npm start
```
2. **Open your browser and navigate to**:
```
http://localhost:3000
```
## Routing Setup
The project uses `react-router-dom` to manage the routing between different pages. Here's how the routing is configured:
- **Home Route (`/`)**: Renders the `Home` component.
- **Login Route (`/login`)**: Renders the `Login` component.
- **Signup Route (`/signup`)**: Renders the `Signup` component.
- **Dashboard Route (`/dashboard`)**: Renders the `Dashboard` component and is protected by `PrivateRoute`.
## Screenshots
