Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – How to use react router?

Hi i am building web page in react and i need to add onclick function to my button that have simpel if else statment that in the en will open main.js. But i dont understand how react router is working can someone helt?

App.js

import { useState } from "react"
import { BrowserRouter, Link, Routes, useNavigate } from "react-router-dom";
import Main from "./main.js";

export default function App() {
  const navigate = useNavigate();
  const [inpty, setFull] = useState("");
  const handleSubmit = (event) => {
    event.preventDefault();
    if (inpty.trim().length === 0) {
      alert("Please input your name to continue");
    } else {
      <Routes>
        <Link to={<Main/>}/>
      </Routes>
    }
  }
  return (
    <section className="grid grid-cols-1">
      <div className=" h-screen w-screen fixed bg-gradient-to-r from-violet-500 to-blue-500 bg-cover">
        <h1 className="text-center bg-black text-white">Hi! If you want to support me you can allways check out my <a href="https://www.buymeacoffee.com/HTNR" className="text-[#FFDD00]">"Buy me some coffe"</a>. Thank you!</h1>
        <h1 className="font-customFont1 text-white text-xl mt-3 ml-3 smallP:text-lg mP:text-2xl tP:text-2xl tL:text-2xl sL:text-3xl mL:text-3xl lP:text-3xl">ZenZone</h1>
        <div className="h-screen flex items-center justify-center">
          <div className="grid-cols-1 grid bg-neutral-500 w-[40%] h-[30%] text-center bg-opacity-25 absolute rounded-2xl smallP:w-[60%] smallP:h-[40%] mP:w-[50%] mP:h-[40%] tP:w-[40%] tP:h-[40%] tL:w-[40%] tL:h-[40%] sL:w-[30%] sL:h-[40%] mL:w-[25%] mL:h-[40%] lP:w-[25%] lP:h-[40%]">
            <h1 className="font-roboto text-[#F8F7F4] smallP:mt-7 smallP:text-lg smallP:font-bold mP:text-xl mP:font-bold mP:mt-5 tP:text-2xl tP:font-bold tP:mt-7 tL:text-3xl tL:font-bold tL:mt-6 sL:text-3xl sL:font-bold sL:mt-4 mL:text-3xl mL:font-bold mL:mt-4 lP:text-3xl lP:font-bold lP:mt-4">Feel home</h1>
            <h1 className="font-robot text-[#F8F7F4] smallP:mt-5 smallP:font-bold smallP:text-lg mP:text-xl mP:font-bold mP:mt-3 tP:text-xl tP:font-bold tL:text-2xl tL:font-bold tL:-mt-2 sL:text-2xl sL:font-bold sL:-mt-4 mL:text-2xl mL:font-bold mL:-mt-3 lP:text-2xl lP:font-bold lP:-mt-3">Let's start with your name</h1>
            <div className="flex items-center justify-center">
              <div className="relative">
                <input
                  type="text"
                  value={inpty}
                  onChange={e => setFull(e.target.value)}
                  placeholder="Carlos Hill"
                  className="border-b border-gray-300 py-1 focus:border-b-2 focus:border-blue-700 transition-colors focus:outline-none peer bg-inherit smallP:w-32 smallP:text-lg text-white smallP:mt-5 mP:w-44 mP:text-xl mP:mt-5 tP:w-52 tP:text-xl tL:w-60 tL:text-xl sL:w-64 sL:text-xl sL:-mt-4 mL:w-60 mL:text-xl lP:w-60 lP:text-xl lP:-mt-4"
                />
              </div>
            </div>
            <div className="justify-center items-center place-content-center place-items-center">
              <button onClick={handleSubmit} className="w-40 h-12 bg-white cursor-pointer rounded-3xl border-2 border-[#9748FF] shadow-[inset_0px_-2px_0px_1px_#9748FF] group hover:bg-[#9748FF] transition duration-300 ease-in-out
                        smallP:mt-5 smallP:w-28 smallP:h-9 mP:mt-5 mP:w-40 mP:h-12 mP:text-base tP:mt-5">
                <span className="font-medium text-[#333] group-hover:text-white">Continue</span>
              </button>
            </div>
            <button className="smallP:text-base smallP:mt-20 smallP:text-white mP:mt-24 mP:text-white mP:text-base tP:text-white tL:text-white sL:text-white mL:text-white lP:text-white">Continue as Friende</button>
          </div>
        </div>
      </div>
    </section>
  )
}

index.js

import React from 'react';
import ReactDOM from 'react-dom/client';
import { BrowserRouter } from 'react-router-dom';

import './index.css';
import App from './App';
import Main from './main';
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <BrowserRouter>
    <App />
    </BrowserRouter>
);

I have tried to find information everywhere and trie it out but it doest work i even tried chatGpt, blackbox and Tabnin but nothing works

Tags:

2

Answers


  1. 0

    You can use router like this

    import { BrowserRouter as Router, Route, Routes } from "react-router-dom";
function yourclass() {
  return (
    <div className="yourclassname">
  
       <Router>
      <Routes>
       <Route path='/' element={<yourclass/>}/>/>
</Routes>
</Router>

   </div>
  );
}

export default yourclass;
    Login or Signup to reply.
  2. 0

    As you are already using useNavigate hook just navigate("/main") it will work

    const navigate = useNavigate();
      const [inpty, setFull] = useState("");
      const handleSubmit = (event) => {
        event.preventDefault();
        if (inpty.trim().length === 0) {
          alert("Please input your name to continue");
        } else {
          navigate("/main")
        }
      }
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search