I am trying to create a signup and sign in new site that’s react site
- I added components navbar/header in that header I added login button
and the link is working after clicking link page opening
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
3
Answers
You have not defined routes. After importing Routes and Route you should do:
NOTE: I didn’t add the Header because you can add it according to your scenario.
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:
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’.
I tested the solution.
You can refer it here: routing solution
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:
Now this will create your route for the login and signup page.
May this will help you.