In React, I'm unable to navigate to a different page

Question

In React, I'm unable to navigate to a different page

My English may not be the best, but I am working on creating a Login Page. The issue I'm facing is that when I click the Login button, I want to navigate to the Home Page I designed using React. However, whenever I try to implement Link or Route commands for redirection, the screen turns completely white without any error messages. Interestingly, everything functions properly once I remove 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've attempted to utilize Link and Route commands by importing the necessary files for routing purposes.

javascript html css reactjs bootstrap-5

Answer 1

Answer №1

Avoid using the body tag as it already exists in the index.html file. The path and component pairing for routes may seem unusual, consider using "/" for the homepage and "/login" for the login component within the <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>
     </>

Considering this appears to be a login form, it is recommended to create a "/login" route with the <LoginPage /> element. Additionally, avoid using the Link tag inside the form button as it deviates from standard practice. Forms are typically used for submission, not navigation. If you intend to navigate using Link, place it outside the form structure. Below is 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>
)
}

One possible issue could be with the import-export configuration of the components:

import Sifre from './App_sifre'
import Anasayfa from './App_anasayfa'
import Login from './App_login'

Review any errors that may appear in the Chrome console for further insight.

Answer 2

Avoid using the body tag as it already exists in the index.html file. The path and component pairing for routes may seem unusual, consider using "/" for the homepage and "/login" for the login component within the <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>
     </>

Considering this appears to be a login form, it is recommended to create a "/login" route with the <LoginPage /> element. Additionally, avoid using the Link tag inside the form button as it deviates from standard practice. Forms are typically used for submission, not navigation. If you intend to navigate using Link, place it outside the form structure. Below is 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>
)
}

One possible issue could be with the import-export configuration of the components:

import Sifre from './App_sifre'
import Anasayfa from './App_anasayfa'
import Login from './App_login'

Review any errors that may appear in the Chrome console for further insight.

Answer 3

Answer №2

To start, modify your index.js by adding the following code snippet. Your code may vary slightly, but make sure to include the line

import { BrowserRouter } from "react-router-dom";

and wrap the <App /> component with

<BrowserRouter>  </BrowserRouter>

tags.

Your updated file should resemble something like this:

import { StrictMode } from "react";
import { createRoot } from "react-dom/client";
import { BrowserRouter } from "react-router-dom";

import App from "./App";

const rootElement = document.getElementById("root");
const root = createRoot(rootElement);

root.render(
  <StrictMode>
    <BrowserRouter>
      <App />
    </BrowserRouter>
  </StrictMode>
);

Next, update your App.js as follows: (1/ Removed the <BrowserRouter> section and moved it to index.js. 2/ Made adjustments to the button with the Link to=" ".)

import React from "react";
import 'bootstrap/dist/css/bootstrap.min.css';
import './App_login.css'
import logo from "./assets/resim.png"
import { 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 ">

         // Rest of the App.js code remains the same

<button type="button" className="btn btn-primary">
  <Link to="/anasayfa">Login</Link>
</button>

Please note that I replaced the previous button implementation with the above code to ensure proper navigation using the Link component. If you intended to navigate to / instead of /anasayfa, you can adjust the path in the Link component accordingly.

I also updated the button type attribute from type="submit" to type="button".

Answer 4

To start, modify your index.js by adding the following code snippet. Your code may vary slightly, but make sure to include the line

import { BrowserRouter } from "react-router-dom";

and wrap the <App /> component with

<BrowserRouter>  </BrowserRouter>

tags.

Your updated file should resemble something like this:

import { StrictMode } from "react";
import { createRoot } from "react-dom/client";
import { BrowserRouter } from "react-router-dom";

import App from "./App";

const rootElement = document.getElementById("root");
const root = createRoot(rootElement);

root.render(
  <StrictMode>
    <BrowserRouter>
      <App />
    </BrowserRouter>
  </StrictMode>
);

Next, update your App.js as follows: (1/ Removed the <BrowserRouter> section and moved it to index.js. 2/ Made adjustments to the button with the Link to=" ".)

import React from "react";
import 'bootstrap/dist/css/bootstrap.min.css';
import './App_login.css'
import logo from "./assets/resim.png"
import { 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 ">

         // Rest of the App.js code remains the same

<button type="button" className="btn btn-primary">
  <Link to="/anasayfa">Login</Link>
</button>

Please note that I replaced the previous button implementation with the above code to ensure proper navigation using the Link component. If you intended to navigate to / instead of /anasayfa, you can adjust the path in the Link component accordingly.

I also updated the button type attribute from type="submit" to type="button".

In React, I'm unable to navigate to a different page

Answer №1

Answer №2

Similar questions

Tips on accessing files saved in a one-to-many connection using Mongoose

Error loading resource: The server returned a 404 status code indicating the requested resource was not found in the Node.js socket.io

Sequencing asynchronous functions in Angular: Ensuring one function runs before another

An error of TypeError is being encountered in AngularJS

Is there a method in React Native to include the "share" icon in my drawer instead of a button?

Request financial data from AlphaVantage using PHP

Enhancing the Value of BehaviorSubject with Object Assign in Angular using Typescript and RxJs

Is there a way to determine if a browser's network activity is inactive?

JavaScript: Creating Custom IDs for Element Generation

The Angular @Input directive may be prone to receiving inaccurate model data

AngularJS - Sending event to a specific controller

Tips for accurately obtaining row counts from a dynamic table when the `<tr>` numbers are constantly fluctuating

Animating transitions on a dynamic Bootstrap navbar using jQuery

Nested navigation in Bootstrap

Ways to Read JSON without Using jQuery

The function of jQuery .click() not triggering on elements within msDropDown

problem encountered while attempting to transmit data to multer in React

Save the session ID in localStorage instead of a cookie

Change the background image when hovering over an element with vanilla JavaScript by utilizing data attributes

Tips for modifying hover effects using jQuerystylesheet changes