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:
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>
);
}
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'));
}
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.
