link login page to homepage using react

Question

I am trying to display first the log in page and then it goes to the home page but it does not work. Can Anyone figure out the problem? How Can I direct my login page after putting all the details and then it opens the homepage. I did the homepage and its ready but the code is too big. If anyone can help solve the problem I would really appreciate it.

App.js

import Home from "./pages/home/Home";
import Login from "./pages/login/Login";
import List from "./pages/list/List";
import Single from "./pages/single/Single";
import New from "./pages/new/New";
import { BrowserRouter, Routes, Route } from "react-router-dom";
import { productInputs, userInputs } from "./formSource";
import "./style/dark.scss";



function App() {
  

  return (

    <div className={"app"}>
      <BrowserRouter>
        <Routes>
          <Route path="/">
          <Route index element={<Home />} />
            <Route path="login" element={<Login />} />
            
            <Route path="taxi">
              <Route index element={<List />} />
              <Route path=":userId" element={<Single />} />
              <Route
                path="new"
                element={<New inputs={userInputs} title="Taxi" />}
              />
            </Route>

            <Route path="bus">
              <Route index element={<List />} />
              <Route path=":productId" element={<Single />} />
              <Route
                path="new"
                element={<New inputs={productInputs} title="Bus" />}
              />
            </Route>

          </Route>
          
        </Routes>
      </BrowserRouter>
    </div>
  );
}

export default App;

Blockquote

Also I found this login page on google. I am just using it as tutorial

Login.jsx

import React, { Component } from "react";
import "./login.scss";
import { Navigate } from "react-router-dom";

class Login extends Component {
  constructor(props) {
    super(props);
    this.state = {
      islogged: false,
      loginParams: {
        user_id: "",
        user_password: ""
      }
    };
  }
  handleFormChange = event => {
    let loginParamsNew = { ...this.state.loginParams };
    let val = event.target.value;
    loginParamsNew[event.target.name] = val;
    this.setState({
      loginParams: loginParamsNew
    });
  };
 
  login = event => {
    let user_id = this.state.loginParams.user_id;
    let user_password = this.state.loginParams.user_password;
    if (user_id === "admin" && user_password === "123") {
      localStorage.setItem("token", "T");
      this.setState({
        islogged: true
      });
    }
    event.preventDefault();
  };


  render() {
    if (localStorage.getItem("token")) {
      return <Navigate to="home" />;
    }
    return (
      <div className="container">
        <form onSubmit={this.login} className="form-signin">
          <h1 className="h3 mb-3 font-weight-normal">Please sign in</h1>
          <div className="row">
            <div className="col">
              <input
                type="text"
                name="user_id"
                onChange={this.handleFormChange}
                placeholder="Enter Username"
              />
              <input
                type="password"
                name="user_password"
                onChange={this.handleFormChange}
                placeholder="Enter Password"
              />
              <input type="submit" value="Login" />
            </div>
          </div>
          <p>user_id === "admin" && user_password === "123"</p>
        </form>
      </div>
    );
  }
}
export default Login;

score 0 · Answer 1 · answered May 14 '22 at 09:29

By reading your question, I assume you want to make react show the Login Page and your primary page, and once the user enters the information you want it to send the user to Homepage, right?

Your Code:

<Route path="/">
<Route index element={<Home />} />
<Route path="login" element={<Login />} />

Change to:

<Route path="/" element={<Login />}>
<Route path="home" element={<Home />} />

Use Navigate from react-router-dom, to send or push the user to the designated page after entering all the information.

navigate("/path/to/push");

To push the user to the Home page, just replace the path within the bracket.

Check this issue for more information regarding navigation plus it has multiple ways to transfer users from one page to another.

link login page to homepage using react

1 Answers1