Step 1: Set Up the React Project Using Vite

  • Create a Vite React App: Run the following command in your terminal:

    bash
     
    npm create vite@latest my-vite-router-app --template react
    cd my-vite-router-app

  • Install Dependencies: Install React Router DOM:

    bash
     
    npm install react-router-dom

Step 2: Project Structure

  1. Update your project folder to look like this:

    plaintext
     
    src/ ├── components/ │ ├── Home.jsx │ ├── About.jsx │ ├── Contact.jsx │ ├── NotFound.jsx │ ├── NavBar.jsx ├── App.jsx ├── main.jsx

Step 3: Create Components

1. NavBar Component

Create NavBar.jsx to handle navigation links:

javascript
import React from 'react'; import { Link } from 'react-router-dom'; function NavBar() { return ( <nav> <ul style={{ listStyle: 'none', display: 'flex', gap: '1rem' }}> <li> <Link to="/">Home</Link> </li> <li> <Link to="/about">About</Link> </li> <li> <Link to="/contact">Contact</Link> </li> </ul> </nav> ); } export default NavBar;

2. Home Component

Create Home.jsx:

javascript
import React from 'react'; function Home() { return <h1>Welcome to the Home Page</h1>; } export default Home;

3. About Component

Create About.jsx:

javascript
import React from 'react'; function About() { return <h1>About Us</h1>; } export default About;

4. Contact Component

Create Contact.jsx:

javascript
import React from 'react'; function Contact() { return <h1>Contact Us</h1>; } export default Contact;

5. NotFound Component

Create NotFound.jsx:

javascript
import React from 'react'; function NotFound() { return <h1>404 - Page Not Found</h1>; } export default NotFound;

Step 4: Update the App Component

App.jsx:

javascript
import React from 'react'; import { BrowserRouter as Router, Routes, Route } from 'react-router-dom'; import NavBar from './components/NavBar'; import Home from './components/Home'; import About from './components/About'; import Contact from './components/Contact'; import NotFound from './components/NotFound'; function App() { return ( <Router> <NavBar /> <Routes> <Route path="/" element={<Home />} /> <Route path="/about" element={<About />} /> <Route path="/contact" element={<Contact />} /> <Route path="*" element={<NotFound />} /> </Routes> </Router> ); } export default App;
 

Step 5: Update the Entry Point

main.jsx:

javascript
import React from 'react'; import ReactDOM from 'react-dom'; import App from './App'; import './index.css'; ReactDOM.createRoot(document.getElementById('root')).render( <React.StrictMode> <App /> </React.StrictMode> );
 

Step 6: Start the Development Server

Run the following command:

bash
npm run dev

This starts the development server, and the application is accessible at http://localhost:5173.

Step 7: Test the Application

  • Navigate to / for the Home Page.
  • Navigate to /about for the About Page.
  • Navigate to /contact for the Contact Page.
  • Navigate to any undefined route (e.g., /random) to see the 404 – Page Not Found page.

Benefits of Using Vite

  • Fast Build Time: Vite uses ES Modules, resulting in faster builds and updates.
  • Lightweight: Vite provides a minimal setup with necessary tools.
  • Modern Features: Optimized for modern browsers.