Here I am sharing photo of url before click:
Here I am sharing photo of url after click:
Code of App.js:
import { BrowserRouter as Router, Route, Switch } from "react-router-dom";
import Login from "./components/login/Login";
import Register from "./components/register/Register";
import Home from "./pages/home/Home";
import Profile from "./pages/profile/Profile";
function App() {
return (
<Router>
//using router
<Switch>
<Route exact path="/">
//path to home page
<Home />
</Route>
<Route exact path="/profile/:username">
//path to profile
<Profile />
</Route>
<Route exact path="/login">
// path to login
<Login />
</Route>
<Route exact path="/register">
//path to register
<Register />
</Route>
</Switch>
</Router>
);
}
export default App;
Code for login.js
import { Link } from "react-router-dom";
import "./login.css";
export default function Login() {
return (
<div className="login">
<div className="loginWrapper">
<div className="loginLeft">
<Link to="/" style={{ textDecoration: "none" }}>
<span className="loginLogo">Social Media</span>
</Link>
<div className="loginText">
Connect with friends and the world around you on Social Media
</div>
</div>
<div className="loginRight">
<input placeholder="Email" type="email" className="loginEmail" />
<input
placeholder="Password"
type="password"
className="loginPassword"
/>
<div className="loginButtonDiv">
<button className="loginButton">Log In</button>
</div>
<div className="loginPasswordReset">Forgot Password?</div>
<button className="createNew">Create a New Account</button>
</div>
</div>
</div>
);
}

