Clicking to React Router Dom Link changes url but not the component

Viewed 42

Here I am sharing photo of url before click:

enter image description here

Here I am sharing photo of url after click:

enter image description here

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

0 Answers
Related