i am actually using V6 React Router Dom i made my index.js my routinng file :
import React from 'react';
import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
import Login from './components/Login';
import Register from './components/Register';
import Welcome from './components/Welcome';
import TableauDetails from './components/TableauDetails';
import NotFound from './components/NotFound';
function App() {
return (
<Router>
<Routes>
<Route path="/" element={<Login />} />
<Route path="/register" element={<Register />} />
<Route path="/welcome" element={<Welcome />} />
<Route path="/tableau/:id" element={<TableauDetails />} />
<Route path="*" element={<NotFound />} />
</Routes>
</Router>
);
}
export default App;
also whennever i try to access any other path i always get displayed that blue font background i used in one of my js
Rn i am only trynna access my / which should render my Login but it doesn work at all
import React, { useState } from 'react';
import '../Login.css';
const Login = () => {
const [passwordVisible, setPasswordVisible] = useState(false);
const [username, setUsername] = useState('');
const [buttonText, setButtonText] = useState('Continue');
const checkLoginPolicy = () => {
const email = document.querySelector('input[name=username]');
const span = document.querySelector('.username-value');
span.innerHTML = email.value;
setUsername(email.value);
if (!email.value) {
hidePasswordInput();
setButtonText('Continue');
} else if (email.value.includes('atlassian')) {
hidePasswordInput();
setButtonText('Log in with Atlassian');
} else if (email.value.includes('acme') || email.value.includes('sso')) {
hidePasswordInput();
setButtonText('Log in with SSO');
} else {
setButtonText('Continue');
return true;
}
return false;
};
const togglePassword = () => {
setPasswordVisible(!passwordVisible);
};
const lockUsername = () => {
const usernameInput = document.querySelector('input[name=username]');
const usernameDiv = document.querySelector('.read-only-username');
usernameInput.classList.add('hidden');
usernameDiv.classList.remove('hidden');
showPasswordInput();
};
const editUsername = () => {
const usernameInput = document.querySelector('input[name=username]');
const usernameDiv = document.querySelector('.read-only-username');
const password = document.querySelector('input[name=password]');
usernameInput.classList.remove('hidden');
usernameDiv.classList.add('hidden');
password.value = '';
setButtonText('Continue');
hidePasswordInput();
};
const hidePasswordInput = () => {
const pswdSection = document.querySelector('#pswd');
pswdSection.classList.add('hidden');
setPasswordVisible(false);
};
const showPasswordInput = () => {
const pswdSection = document.querySelector('#pswd');
pswdSection.classList.remove('hidden');
setPasswordVisible(true);
};
const updateButton = (text) => {
setButtonText(text || 'Continue');
};
const onSubmit = (e) => {
e.preventDefault();
e.stopPropagation();
const shouldShowPasswordInput = checkLoginPolicy();
if (shouldShowPasswordInput) {
lockUsername();
showPasswordInput();
updateButton('Log in');
}
};
return (
<>
<header>
<img src="https://d2k1ftgv7pobq7.cloudfront.net/meta/c/p/res/images/trello-header-logos/76ceb1faa939ede03abacb6efacdde16/trello-logo-blue.svg" />
</header>
<main>
<form onSubmit={onSubmit}>
<h3>Log in to Trello</h3>
<section>
<label htmlFor="username">Email Address</label>
<input
type="email"
name="username"
placeholder="Email Address"
autoComplete="username"
required
value={username}
onChange={(e) => setUsername(e.target.value)}
/>
<div className="read-only-username hidden">
<span className="username-value"></span>
<a className="edit-username" onClick={editUsername}>
<i>
<svg
width="24"
height="24"
viewBox="0 0 24 24"
focusable="false"
role="presentation"
>
<path
d="M4.02 19.23a1 1 0 0 0 1.18 1.18l3.81-.78-4.21-4.21-.78 3.81zM19.844 6.707l-2.12-2.122A1.997 1.997 0 0 0 16.308 4c-.512 0-1.024.195-1.415.585l-9.757 9.758 4.95 4.95 9.757-9.758a2 2 0 0 0 0-2.828z"
fill="currentColor"
fillRule="evenodd"
></path>
</svg>
</i>
</a>
</div>
</section>
<section className={passwordVisible ? '' : 'hidden'} id="pswd">
<label htmlFor="password">Password</label>
<input
type={passwordVisible ? 'text' : 'password'}
name="password"
placeholder="Password"
autoComplete="current-password"
/>
<a className="toggle-password" onClick={togglePassword}>
<i className={passwordVisible ? 'eye open' : 'eye closed'}>
<svg
width="24"
height="24"
viewBox="0 0 24 24"
focusable="false"
role="presentation"
>
<g fill="currentColor" fillRule="evenodd">
<path
d="M12 18c-4.536 0-7.999-4.26-7.999-6 0-2.001 3.459-6 8-6 4.376 0 7.998 3.973 7.998 6 0 1.74-3.462 6-7.998 6m0-14C6.48 4 2 8.841 2 12c0 3.086 4.576 8 10 8 5.423 0 10-4.914 10-8 0-3.16-4.481-8-10-8"
></path>
<path
d="M11.977 13.984c-1.103 0-2-.897-2-2s.897-2 2-2c1.104 0 2 .897 2 2s-.896 2-2 2m0-6c-2.206 0-4 1.794-4 4s1.794 4 4 4c2.207 0 4-1.794 4-4s-1.793-4-4-4"
></path>
</g>
</svg>
</i>
</a>
</section>
<button>{buttonText}</button>
</form>
<hr />
<div className="bottom-links">
<a className="forgotLink" href="#">
Can't log in?
</a>
•
<a className="signupLink" href="#">
Sign up for an account
</a>
</div>
</main>
<div className="background"></div>
</>
);
};
export default Login;
thank you for ur time and advice
i tried to switch versions of the router while also switching the syntax but nothing works tried installing other versions of node but nothing