Question 198813 in Reactjs Question posted in
The new location for the React Documentation can be found here.

Reactjs – I am trying to create signup pages in react website but it's not working

I am trying to create a signup and sign in new site that’s react site

  1. I added components navbar/header in that header I added login button

enter image description here

and the link is working after clicking link page opening

enter image description here

The page, content is not showing I added css also for content but not showing

Chat gpt giving answers but compiler showing errors chat gpt also giving multiple error code I thinking prompt mistake but anyone of you help me to create that

This is my app.js code

import React from "react";
import { BrowserRouter } from 'react-router-dom';
import Header from "./components/layout/Header";

function App() {
  return(
    
    <Header />
    
  );
}
export default App;

This is my Header.js code:

import { Link } from "react-router-dom";
import { useState } from "react";
import Login from "../pages/Login";

function Header() {
    const [nav, setNav] = useState(false);

    const openNav = () => {
        setNav(!nav);
    }
    return (
      <div className="header-container">
        <div className="left-header">
          <h2 className="header">Fallen</h2>
        </div>
        <div className="right-header">
          <Link onClick={openNav} to="/Login">SignUp/Login</Link>
        </div>
      </div>
    );
  }
  
  export default Header;

This is my login js code:

function Login() {
    return(
        <>
        <h2>Login</h2>
        </>
    );
}
export default Login;

This is my index.js file:

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
import { BrowserRouter } from 'react-router-dom';

ReactDOM.render(
  <React.StrictMode>
    <BrowserRouter>
      <App />
    </BrowserRouter>
  </React.StrictMode>,
  document.getElementById('root')
);

reportWebVitals();

Can anyone check it and help me?

I am expecting a signup and login feature website

Tags:

3

Answers


  1. 0

    You have not defined routes. After importing Routes and Route you should do:

    import React from "react";
import { Routes, Route } from 'react-router-dom';
import Header from "./components/layout/Header";

function App() {
  return(
    <div className="App">
      <Routes>
        <Route path="login" element={<Login />} />
        <Route path="register" element={<Register />} />
        .
        . 
        .
      </Routes>
    </div>  
  );
}
export default App;

    NOTE: I didn’t add the Header because you can add it according to your scenario.

    Login or Signup to reply.
  2. 0

    You have to enable routing for your application.

    There are two ways to do this, using either ‘BrowserRouter’ component or ‘createBrowserRouter’ function.

    Way 1: If you going to use ‘BrowserRouter’ component for routing, setup up your index.js like this way:

    import { BrowserRouter, Routes, Route } from "react-router-dom";

ReactDOM.render(
  <React.StrictMode>
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<App />} />
        <Route path="Login" element={<Login />} />
      </Routes>
    </BrowserRouter>
   </React.StrictMode>,
  document.getElementById("root")
);

    Way 2: The recommended router for all React Router web projects is using ‘createBrowserRouter’ function, follow the following method to setup routing in your index.js using ‘createBrowserRouter’.

    import { createBrowserRouter, RouterProvider } from "react-router-dom";

const router = createBrowserRouter([
  {
    path: "/",
    element: <App />
  },
  {
    path: "Login",
    element: <Login />
  }
]);

ReactDOM.createRoot(document.getElementById("root")).render(
  <RouterProvider router={router} />
);

    I tested the solution.
    You can refer it here: routing solution

    Login or Signup to reply.
  3. 0

    If this is your problem then you have to first import some of the components from react-router-dom that is available in the latest version of it. And you should update your App.js like this:

    import React from "react";
import { Routes, Route } from 'react-router-dom';
import Header from "./components/layout/Header";

function App() {
  return(
    <div className="App">
      <Header/>
      <Routes>
        <Route path="login" element={<Login />} />
        <Route path="register" element={<Register />} />
      </Routes>
    </div>  
  );
}
export default App;

    Now this will create your route for the login and signup page.
    May this will help you.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search