Navigation in React-JS

 

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