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

Ganesh Published at Dev

Ganesh

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

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

and the link is working after clicking the link, the page is opening

The page's content is not showing. I added css also for content but it's not showing.

ChatGPT is giving answers but my compiler is showing errors. Can anyone of you help me to create this?

I am expecting a signup and login feature website.

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();

myrn

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.

Collected from the Internet

Please contact [email protected] to delete if infringement.