I’m currently developing a web Application where I’m kinda stuck between what to use for navigation between pages?

Option 1: Use Axios
Option 2: Use React-router-dom
Option 3: Navigate useing onClick={}
Option 4: using useEffect

I’m new here..What are your suggestion?

function handleClick(){
    return <Form />
}

function Add() {
    return(
        <div className="add">
            <IoIosAddCircle 
            onClick={handleClick}
            onMouseOver={handleMouseOver} 
            onMouseOut={handleMouseOut} 
            className="addIcon" />
        </div>
    )
}

I also has Server.js running. But haven’t really setup anything..

import express from "express"
import {dirname} from "path"
import { fileURLToPath } from "url";
import path from "path";
const __dirname = dirname(fileURLToPath(import.meta.url));
const app = express();
const port = 4000;

app.use(express.static(path.join('public')));

app.get("/", (req, res) => {
    // res.render(API_URL)
    console.log(path.join(__dirname,  'public', 'index.html'));
})

app.get('/', (req, res) => {
    res.sendFile(path.join(__dirname, 'public', 'index.html'));
});

app.listen(port, () => {
    console.log(`Server ${port} is up and running`)
})