Java, .NET, PHP, PYTHON, ANGULAR, ML, Data Science, Testing, CI Tutorials in Easy Languages.

"Best Software Training, Internship, Project Development center of Indore India, Helpline 780506-3968"

 Navigation means redirection from one web page to another.

In this example i am describing how to navigate from one component to another from button click and pass data from one component to another with path data.

React Router Dom provide <Routes> and <Route> Component to create path using <BrowserRouter>.

It has a Link method to manage navigation through hyperlink.


React Router Dom provide useNavigate() that is used to navigate from button click, we can pass data also using object pattern.



Step 1st;-

npm install react-router-dom


Step2nd;

create set of path under app.js

import logo from './logo.svg';
import './App.css';
import { BrowserRouter, Routes, Route } from "react-router-dom";
import Addprops from "./Addprops"
import Subprops from "./Subprops"
import Multiprops from "./Multiprops"
import Divisionprops from "./Divisionprops"
import Operation from './Operation';
import Layout from './Layout';
function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<Layout  />}>
          <Route index element={<Operation ope="*" />} />
          <Route path="add" element={<Addprops />} />
          <Route path="sub" element={<Subprops />} />
          <Route path="multi" element={<Multiprops />} />
          <Route path="div" element={<Divisionprops />} />
          </Route>
      </Routes>
    </BrowserRouter>
   
  );
}

export default App;

Step 3rd:-

Create Five components,
Layout.js, Operation.js, Addprops, Subprops, Multiprops, Divisionprops

Code of Operation.js
import { useState } from "react"
import { Link,useNavigate} from "react-router-dom"
export default function Operation(props)
{
   let navigate = useNavigate();
   const[a,setA] = useState(0)
   const[b,setB] = useState(0)
   function fun()
   {
   
    if(props.ope=='+')
    {
      navigate('add',{state:{num1:parseInt(a.target.value),num2:parseInt(b.target.value)}});
     
    }
    else if(props.ope=='-')
    {
      navigate('sub',{state:{num1:parseInt(a.target.value),num2:parseInt(b.target.value)}});
    }
    else if(props.ope=='*')
    {
      navigate('multi',{state:{num1:parseInt(a.target.value),num2:parseInt(b.target.value)}});
    }  
    else if(props.ope=='/')
    {
      navigate('div',{state:{num1:parseInt(a.target.value),num2:parseInt(b.target.value)}});
    }
    else
    {
      alert("other");
    }
   }
 
    return (<div>
      <Link to="add">Addition</Link>  <Link to="sub">Substraction</Link>  <Link to="multi">Multiplication</Link>  <Link to="div">Division</Link>
      <br />
      <input type="text" onChange={(e)=>setA(e)} />
      <br/>
      <input type="text" onChange={(e)=>setB(e)} />
      <br />
      <input type="button" onClick={fun} value="Click" />
     <p>Props Example</p>
    </div>)
   
}

Code of Layout.js
import { Outlet } from "react-router-dom";
export default function Layout()
{
 
    return (<div>
       
          <Outlet />
          </div>)
}
Code of Addprops.js
import { useLocation } from "react-router-dom";
export default function Addprops()
{
    const location = useLocation();
   // const { a, b } = location.state;
    console.log("Addition",location.state.num1);
    var c = location.state.num1+location.state.num2;
    return (<div>
     <p>Result is add {c} </p>
    </div>)
}

Code of Subprops.js
import { useLocation } from "react-router-dom";
export default function Subprops()
{
    const location = useLocation();
   // const { a, b } = location.state;
    console.log("Addition",location.state.num1);
    var c = location.state.num1-location.state.num2;
    return (<div>
     <p>Result is add {c} </p>
    </div>)
}


Code of Multiprops.js
import { useLocation } from "react-router-dom";
export default function Multiprops()
{
    const location = useLocation();
   // const { a, b } = location.state;
    console.log("Addition",location.state.num1);
    var c = location.state.num1*location.state.num2;
    return (<div>
     <p>Result is add {c} </p>
    </div>)
}

Code of Divisionprops.js

import { useLocation } from "react-router-dom";
export default function Divisionprops()
{
    const location = useLocation();
   // const { a, b } = location.state;
  //  console.log("Addition",location.state.num1);
    var c = location.state.num1/location.state.num2;
    return (<div>
     <p>Result is add {c} </p>
    </div>)
}

Code of Index.js
root.render(
  <React.StrictMode>
    <App  />
  </React.StrictMode>
);

Now we change props in App.js Operation and show the output



Post a Comment

POST Answer of Questions and ASK to Doubt

Previous Post Next Post