This is a simple React SPA that demonstrates routing and navigation using React Router DOM. It includes the following components:
App.js
: The main application component that sets up routing and renders theNavbar
and content based on the current route.Navbar.js
: The navigation bar component that displays links to different pages and highlights the active page.Home.js
,About.js
, andAccount.js
: Components for each page of the application (Example Components).
- Node.js and npm (or yarn) installed on your system.
- Clone this repository or download the ZIP file.
- Navigate to the project directory in your terminal.
- Run
npm install
(oryarn install
) to install the required dependencies.
- Start the development server by running
npm start
(oryarn start
). - The application will be available in your browser at
http://localhost:5173/
.
- Routing: This application uses React Router DOM to handle navigation between different pages (routes) within the SPA.
- Navigation: The
Navbar
component displays links to theHome
,About
, andAccount
pages. Clicking on a link will navigate the user to the corresponding route. - Active Page Highlighting: The active page is highlighted in the navigation bar using inline styles that adjust the font weight.
- This is a basic example.
- You may want to explore more advanced routing features offered by React Router DOM, such as nested routes, dynamic parameters, and protected routes.
Feel free to fork this repository and make your own modifications. We welcome contributions to improve the application!