How to Set Up Vite for a Multi-Page Application?

Vite is a frontend development tool, used to build projects and multiple page applications in React.js. It is a beginner-friendly user tool that was developed by the founder of Vue.js, another framework of React.js. we will learn how to set up Vite for a Multi-Page Application.

Steps to Set Up Vite for a Multi-Page Application

Step 1: Create a vite project using the following command:

npm create vite@latest

Step 2: Name your project & select the React framework here using the downward arrow key.

Vanilla
Vue
React
Preact
Lit
Svelte
Solid
Qwik
Others

Step 3: Select Variant: choose any variant of your choice using the downward arrow key,i.e: choose JavaScript.

TypeScript
TypeScript + SWC
JavaScript
JavaScript + SWC

Step 4: Now, switch to my-react-app directory

cd my-react-app

Step 5: Install node dependencies.

npm install

• Now your Vite project has been setup.
• To allow going on different web pages, ie., to create a Multi-page application, we need to install a dependency on our project.

Step 6: Use the following command to install dependencies to allow accessing multiple pages.

npm install react-router-dom

Updated Dependencies:

"dependencies": {
    "react": "^18.3.1",
    "react-dom": "^18.3.1",
    "react-router-dom": "^6.26.1"
  },

Project Structure:

Use of React-router-dom

React-router-dom is a dependency in Vite that is used to access and create multiple web page applications. A popular term, Routing is used for the same. We use routes in Vite to route, or go to the other web page. For eg. The default route of a website www.abc.com would have a route of '/', and we can create a route for the login page, which would be a part of the same website, but would redirect to a different page with the url www.abc.com/login.

Step 7: Add Browser Router to main.jsx

• In the main.jsx file, add a Browser Router enclosing the entire app.jsx.
• This can also be added directly in the App.jsx file but it should be an enclosing parameter of all the components or routes being used by the project.
• Here, we have added BrowserRouter from react-router-dom to configure the entire directory for routes. In other words, it simply tells the application that now it is ready to become a multi page application.

// main.jsx

import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
import './index.css'; 
import { BrowserRouter } from 'react-router-dom';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <BrowserRouter>
    <App />
  </BrowserRouter>
);

Step 8: Add Routes and Route

• Create a Pages directory in which add three components which you would like to show through your multipage application.
• Here, we have created Contests.jsx, DSA.jsx and Login.jsx.
• Add a bit of code in each one of them that displays the name of the page as heading and a small text in it.
• Now, in your App.jsx file create Routes and specific Route for each component that you want to define in your application. For eg. Here, we want that the '/login' route takes us to the Login.jsx component file, but on a different page. Thus, we will define a Route for the same.
• For eg. We have imported the pages from src/pages/ directory and have defined a Routes component. Within that we have added Login.jsx component.

<Routes>
      <Route path="/login" element={<Login />} />
</Routes>

Here are all the components and pages code:

/* index.css */

body {
  margin: 0;
  font-family: Poppins;
  font-size: large;
}

nav ul {
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: center;
}

nav ul li {
  margin: 0 10px;
}

nav ul li a {
  text-decoration: none;
  color: #007bff;
}

// src/Components/Header.jsx

import React from "react";
import { Link } from "react-router-dom";

const Header = () => {
  return (
    <div>
      <div style={{ textAlign: "center" }}>
        <h1 style={{ color: "green" }}>GeeksForGeeks</h1>
        <p>We are learning routes in Vite project</p>
        <nav>
          <ul style={{ listStyleType: "none", padding: 0 }}>
            <li>
              <Link to="/">Home</Link>
            </li>
            <li>
              <Link to="/login">Login</Link>
            </li>
            <li>
              <Link to="/dsa">DSA</Link>
            </li>
            <li>
              <Link to="/contests">Contests</Link>
            </li>
          </ul>
        </nav>
      </div>{" "}
    </div>
  );
};

export default Header;

// src/Pages/Login.jsx

import React from "react";

const Login = () => (
  <div>
    <h1>Login</h1>
    <p>This is the Login page of GeeksForGeeks.</p>
  </div>
);

export default Login;

// src/Pages/DSA.jsx

import React from 'react';

const DSA = () => (
  <div>
    <h1>DSA</h1>
    <p>This is the DSA page of GeeksForGeeks.</p>
  </div>
);

export default DSA;

// src/Pages/Contest.jsx

import React from 'react';

const Contests = () => (
  <div>
    <h1>Contests</h1>
    <p>This is the Contests page of GeeksForGeeks.</p>
  </div>
);

export default Contests;

Step 9: Create Navigate function

To navigate to different routes, we use useNavigate. Here, we have created a button within the App.jsx component on clicking which the useNavigate() function is triggered, and we ca specify the route we want to go back to. Here, we have defined a variable of navigate that the function returns and it takes us to the default route, or home page of the application on click.

Here is the final App.jsx file with navigate function and other routes:

// src/App.jsx

import React from "react";
import { Route, Routes, useNavigate } from "react-router-dom";
import Login from "./pages/Login";
import DSA from "./pages/DSA";
import Contests from "./pages/Contests";
import Header from "./Component/Header";

const Button = () => {
  const navigate = useNavigate();

  const handleClick = () => {
    navigate("/");
  };

  return (
    <button
      onClick={handleClick}
      style={{
        padding: "10px 20px",
        fontSize: "16px",
        cursor: "pointer",
        outline: "none",
        border: "2px solid green",
        borderRadius: "4px",
        marginTop: "16px",
        marginBottom: "16px",
      }}
    >
      Go to Home
    </button>
  );
};

const App = () => (
  <div style={{ textAlign: "center" }}>
    <Header />
    <Button />
    <Routes>
      <Route path="/" element={<div>Welcome to the Home page</div>} />
      <Route path="/login" element={<Login />} />
      <Route path="/dsa" element={<DSA />} />
      <Route path="/contests" element={<Contests />} />
    </Routes>
  </div>
);

export default App;

Output: