React.js URL changes but view does not change

Question

I am new to React.js. I am using React.js 18.0.0. I am developing simple login application. Here I am facing problem in routing. When I click on forget password the URL alone changes but the view remains same. What have I done wrong.

My browser result:

My index.js:

My App.js:

Below is my Login.js where I have added Link:

Answer 1

If you are using react-router-dom version-6 then you can change your code as per the documentation https://github.com/remix-run/react-router/blob/main/docs/getting-started/tutorial.md

In index.js file

import { render } from "react-dom";
import { BrowserRouter } from "react-router-dom";
import App from "./App";

const rootElement = document.getElementById("root");
render(
  <BrowserRouter>
    <App />
  </BrowserRouter>,
  rootElement
);

In App.js file

import React, {useEffect} from 'react';
import { Routes,Route} from 'react-router-dom';

function App(){
return(
   <Routes>
      <Route  path="/" element={<Login/>}>
      <Route  path="/forgetPassword" element={<ForgetPassword/>}
   <Routes>
 );
}

Answer 2

change index.js to :

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';



ReactDOM.render(<App />, document.getElementById("root"));

change App.js to

import React, {useEffect} from 'react';
import ReactDOM from "react-dom";
import { BrowserRouter ,Routes,Route} from 'react-router-dom';

import ForgetPassword from '.........'
import Login from '.......' 


function App(){
return(
 <BrowserRouter>
   <Routes>
      <Route exact path="/" element={<Login/>} />
      <Route path="/forgetPassword" element={<ForgetPassword/>} />

   <Routes>


 </BrowserRouter>

 );

}

 export default App;



 if(document.getElementById('app')){

  ReactDOM.render(<App/>,document.getElementById('app'));

 }