CODEWITHSUNDEEP
reactjsreact-router
barath thangam
barath thangam

Reputation: 113

React.js URL changes but view does not change

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:

enter image description here

My index.js:

enter image description here

My App.js:

enter image description here

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

enter image description here

Upvotes: 2

Views: 7231

Answers (5)

Jawad Chowdhury
Jawad Chowdhury

Reputation: 1

In your index.js file, just remove the <React.StrictMode> tag. In my case, it solved the problem. Sample snippet of index.js is given below:

const root = ReactDOM.createRoot(document.getElementById('root'));
    root.render(
        <BrowserRouter>
        <App />
        </BrowserRouter> 
    );

Upvotes: 0

Andrew
Andrew

Reputation: 1

The issue could be you are rendering in strict mode in your index.js file.

const root = ReactDOM.createRoot(document.getElementById('root'));

root.render(< App />);

Upvotes: -1

Ruhul Amin
Ruhul Amin

Reputation: 37

In your index.js file wrap the App component into BrowserRouter , React.StrictMode will appear first, I hope it will solve the issue. If you're using react-router-dom version 5, upgrade to version 6 and restart your project.

Write your index.js file like this

Upvotes: 1

Tomak
Tomak

Reputation: 31

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

 }

Upvotes: 0

Mukesh Maurya
Mukesh Maurya

Reputation: 430

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

Upvotes: 2

Related Questions