how to connect two component when i click on submit button

Question

I have some user components on which I used the navigation component and I am routing two components on it. when I click on the Device.js component button it should remove device.js and it should redirect to the Keyregister.js component which is having navigation component in it .It should change the value according to the props sent to it. But it is not happening.

user.js

import React from "react";
    import { Route, Switch } from "react-router";
    import "./User.css";
    import Navigation from "./Dashboard/Navigation";
    import AuthModel from "./Dashboard/AuthModel";
    import DeviceDetails from "./Dashboard/DeviceDetails";
    function User() {
      return (
        <>
          <Navigation
            link1={""}
            link2={"Authmodel"}
            link3={"Requests"}
            link1name={"Key Status"}
            link2name={"Key Upload"}
            link3name={"KEY DOWNLOAD"}
          />
          <Switch>
           
            <Route path="/User/Dashboard/AuthModel" component={AuthModel} />
            <Route path="/User/Dashboard/DeviceDetails" component={DeviceDetails} />
          </Switch>
        </>
      );
    }
    export default User;

Navigation.js

import React from "react";
    import "./Navigation.css";
    
    import { Link } from "react-router-dom";
    import { useHistory } from "react-router";
    
    import { Image } from "react-bootstrap";
    import EvoVert from "../../../Resources/EvoluteVert.png";
    
    function Navigation(props) {
      const history = useHistory();
    
      const handleLogout = (e) => {
        e.preventDefault();
    
        localStorage.removeItem("accessToken");
        localStorage.removeItem("roleType");
        history.push("/");
      };
    
      return (
        <>
          <main classMain="main">
            <aside className="sidebar ">
              <Image className="Evo-logo" src={EvoVert} />
    
              <nav className="nav">
                <ul style={{ textDecoration: "none" }}>
                  <li>
                    <Link to={`/User/Dashboard/${props.link2}`}>
                      {props.link2name}
                    </Link>
                  </li>
                  <li>
                    <Link to={`/User/Dashboard/${props.link1}`}>
                      {props.link1name}
                    </Link>
                  </li>
    
                  <li>
                    <Link to={`/User/Dashboard/${props.link3}`}>
                      {props.link3name}
                    </Link>
                  </li>
                </ul>
              </nav>
            </aside>
          </main>
        </>
      );
    }
    
    export default Navigation;

Device.js

import React, { useState, useEffect } from "react";
    
    import { Form } from "react-bootstrap";
    
    import "./Dashboard.css";
    import { useHistory } from "react-router";
    import KeyRegister from "./KeyRegister";
    
    function DeviceDetails() {
      const history = useHistory();
      const [visible, setvisible] = useState(true);
    
      const [serialNum, setSerialNum] = useState("");
      const [slot, setSlot] = useState("");
    
      const frmsubmit = (e) => {};
    
      return (
        <>
          <section className="device-Details_Dashboard">
            <div className="container">
              <div
                className="heading"
                style={{
                  color: "#312450",
                  fontWeight: "400",
                  fontSize: "35px",
                  padding: "1rem",
                }}
              >
                DEVICE DETAILS
              </div>
              <Form onSubmit={frmsubmit}>
                <div>
                  <div className="device-details-box">
                    <label>Serial Number</label>
                    <br />
                    <input
                      type="text"
                      value={serialNum}
                      onChange={(e) => setSerialNum(e.target.value)}
                    />
                  </div>
                  <div className="device-details-box">
                    <label>Slot Number</label>
                    <br />
                    <input
                      type="text"
                      value={slot}
                      onChange={(e) => setSlot(e.target.value)}
                    />
                  </div>
                </div>
    
                <button className="devDetSub" onClick={frmsubmit}>
                  <span>SUBMIT</span>
                </button>
              </Form>
            </div>
          </section>
          {visible && <KeyRegister />}
        </>
      );
    }
    
    export default DeviceDetails;

KeyRegister.js

import React, { useState, useEffect } from "react";
    
    import "./Navigation.css";
    
    import { Route, Switch } from "react-router";
    import DUPKT from "./DUPKT";
    import MasterSession from "./MasterSession";
    import AES from "./AES";
    import Navigation from "./Navigation";
    function KeyRegister() {
      return (
        <>
          <Navigation
            link1={"DUPKT"}
            link2={"MasterSession"}
            link3={"AES"}
            link1name={"DUPKT"}
            link2name={"MASTER KEY"}
            link3name={"AES"}
          />
    
          <main classMain="main">
            <Switch>
              <Route path="/User/Dashboard/DUPKT" component={DUPKT} exact />
              <Route
                path="/User/Dashboard/MasterSession"
                component={MasterSession}
                exact
              />
              <Route path="/User/Dashboard/AES" component={AES} exact />
            </Switch>
          </main>
        </>
      );
    }
    
    export default KeyRegister;

Answer 1

I cannot see anywhere in your naviagation component props you are passing device details.

<Navigation
    link1={""}
    link2={"Authmodel"}
    link3={"Requests"}
    link1name={"Key Status"}
    link2name={"Key Upload"}
    link3name={"KEY DOWNLOAD"} //should have device details in props
  />