Issue
First of all, I apologize for my bad English. I am trying to make a Login Page, when I press the Login button, I want to enter the Home Page I made with React in the same way, but when I use Link or Route commands, the screen becomes completely white without giving any error. It works properly when I delete the code related to redirection.
import React from "react";
import 'bootstrap/dist/css/bootstrap.min.css';
import './App_login.css'
import logo from "./assets/resim.png"
import { BrowserRouter, Route, Routes, Link } from 'react-router-dom';
import Sifre from './App_sifre'
import Anasayfa from './App_anasayfa'
import Login from './App_login'
function App() {
return (
<body className="bg">
<div className="container" >
<div className="card card-body mt-5 pb-5 shadow p-3 mb-5 bg-body rounded ">
<BrowserRouter>
<div>
<Routes>
<Route path='/' element= {<Login />} />
<Route path='/sifre' element= {<Sifre />} />
<Route path='/anasayfa' element= {<Anasayfa />} />
</Routes>
</div>
</BrowserRouter>
<h2 className="text-center text-info ">DMS Planlama Sistemi</h2>
<div className="row mt-5 pb-5">
<div className="col-lg-6 col-sm-12 mb-5">
<img src={logo} alt="login" className="img-fluid" />
</div>
<div className="col-lg-6 col-sm-12">
<form>
<div className="form-group">
<label htmlFor="email">Kullanıcı Adı:</label>
<input type="email" className="form-control" placeholder="Kullanıcı adınız" id="email" />
</div>
<div className="form-group">
<label htmlFor="pwd" style={{marginTop: '15px'}}>Şifre:</label>
<input type="password" className="form-control" placeholder="şifreniz" id="pwd" />
</div>
<div className="form-group form-check">
<label className="form-check-label">
<input className="form-check-input" type="checkbox" /> Beni Hatırla
<label><a href="şifremi unuttum/şifre yenileme.html" to="/sifre" style={{marginLeft: '30px'}}>Şifremi unuttum</a></label>
</label>
</div>
<button type="submit" className="btn btn-primary" href="anasayfa/anasayfa.html">
<Link to="/anasayfa"> Login</Link>
</button>
</form>
</div>
</div>
</div>
</div>
</body>
);
}
export default App;
I tried to use Link and Route commands by importing the files I want to route.
Solution
Do not use the body tag because it already exists in the index.html file. For the routes, the path and component pairing seems a bit odd, try using "/" for the homepage and "/login" for the login component. In <App />
component :
import React from "react";
import 'bootstrap/dist/css/bootstrap.min.css';
import './App_login.css'
import logo from "./assets/resim.png"
import { BrowserRouter, Route, Routes, Link } from 'react-router-dom';
import Sifre from './App_sifre'
import Anasayfa from './App_anasayfa'
import Login from './App_login'
function App() {
return (
<>
<BrowserRouter>
<Routes>
<Route path='/' element= {<HomePage />} />
<Route path='/login' element= {<LoginPage />} />
<Route path='/sifre' element= {<Sifre />} />
<Route path='/anasayfa' element= {<Anasayfa />} />
</Routes>
</BrowserRouter>
</>
Because I saw this is a login form, that's why I suggest you create a "/login" route with the <LoginPage />
element. Also, something a bit unusual, why are you using the Link
tag inside the form button? That's odd, and don't do that because forms are usually used for submission, not navigation. If you want to create navigation using Link
, try placing it outside the form. Here's the content of the <LoginPage />
component:
export default function LoginPage () {
return (
<div className="container" >
<div className="card card-body mt-5 pb-5 shadow p-3 mb-5 bg-body rounded ">
<h2 className="text-center text-info ">DMS Planlama Sistemi</h2>
<div className="row mt-5 pb-5">
<div className="col-lg-6 col-sm-12 mb-5">
<img src={logo} alt="login" className="img-fluid" />
</div>
<div className="col-lg-6 col-sm-12">
<form>
<div className="form-group">
<label htmlFor="email">Kullanıcı Adı:</label>
<input type="email" className="form-control" placeholder="Kullanıcı adınız" id="email" />
</div>
<div className="form-group">
<label htmlFor="pwd" style={{marginTop: '15px'}}>Şifre:</label>
<input type="password" className="form-control" placeholder="şifreniz" id="pwd" />
</div>
<div className="form-group form-check">
<label className="form-check-label">
<input className="form-check-input" type="checkbox" /> Beni Hatırla
<label><a href="şifremi unuttum/şifre yenileme.html" to="/sifre" style={{marginLeft: '30px'}}>Şifremi unuttum</a></label>
</label>
</div>
<button type="submit" className="btn btn-primary">
submit
</button>
</form>
</div>
</div>
</div>
</div>
)
}
And the most suspicious thing to me is perhaps the mistake you made is in the import-export part of the component.
import Sifre from './App_sifre'
import Anasayfa from './App_anasayfa'
import Login from './App_login'
Try looking again at the Chrome console errors, it might appear there.
Answered By - Soni canra Wiguna
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.