Here is my js code I added Route and on click event i am calling routeHandler function to navigate to next page with Content.js selected data but nothing is happening

 `NextPage.js` 
        
    `Content.js` first page `NextPage.js` second page 
        
    import React, { useState } from "react";
    import './Content.css';
    import NextPage from "./NextPage";
    import { BrowserRouter as Router, Route, Link  } from 'react-router-dom';
    
       
    
    function Content() {
     let application_name = process.env.REACT_APP_APPLICATION_NAME;
    
      const [value, setValue] = useState({
        application: "",
        platform: ""
      });
    
      const dropdownHandler = (event) => {
        setValue({
          ...value,
          [event.target.name]: event.target.value
          
        });
        
        console.log(value);
      };
    
      const handleSubmit = (event) => {
        event.preventDefault();
        console.log(value);
        //setValue({ application: "",platform: ""});
      };
      
      const routeHandler = () => (
        <Router>
                <Route path="/nextpage" component={NextPage} />
        </Router>
    );
    
      return (
        <div>
            <form onSubmit={handleSubmit}>
          <div className="application-container">
            <label>Application</label>
            <select
              name="application"
              onChange={dropdownHandler}
              value={value.application}
            >
             
                <option></option>
              <option value={application_name}>{application_name}</option>
              <option value="2">2</option>
              <option value="3">3</option>
            </select>
          </div>
          <div className="platform-container">
            <label>Type of platform</label>
            <select
              name="platform"
              onChange={dropdownHandler}
              value={value.platform}
            >
                <option></option>
              <option value="UMR">UMR</option>
              <option value="IVR">IVR</option>
              <option value="middleware">Middleware</option>
            </select>
          </div>
          <button onClick={routeHandler}>submit</button>
          </form>
        </div>
       
      );
    }
    
    export default Content;
    

The second component is NextPage.js in which I am passing props in function and want to get Content.js data on NextPage.js component but it is doing nothing on button click event is something I am missing

    NextPage.js
    function NextPage(props){
    
        return (
            <div>{props.value}</div>
        )
    }
    
    export default NextPage;

Adding pacakage.json file as i know that after doing npm install it will install all the packages in package.json file below is the package.json file

    {
  "name": "acid_app",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^5.16.4",
    "@testing-library/react": "^13.1.1",
    "@testing-library/user-event": "^13.5.0",
    "bootstrap": "^5.1.3",
    "react": "^18.0.0",
    "react-bootstrap": "^2.2.3",
    "react-dom": "^18.0.0",
    "react-router-dom": "^6.3.0",
    "react-scripts": "5.0.1",
    "reactstrap": "^9.0.2",
    "web-vitals": "^2.1.4"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

    
   
    
   
   Thanks in advance

CodePudding user response：

import React, { useState } from "react";
import './Content.css';
import NextPage from "./NextPage";
import { BrowserRouter as Router, Route, Link,useHistory  } from 'react-router-dom';

   

function Content() {
 let application_name = process.env.REACT_APP_APPLICATION_NAME;

  const [value, setValue] = useState({
    application: "",
    platform: ""
  });

  const dropdownHandler = (event) => {
    setValue({
      ...value,
      [event.target.name]: event.target.value
      
    });
    
    console.log(value);
  };

  const handleSubmit = (event) => {
    event.preventDefault();
    console.log(value);
    //setValue({ application: "",platform: ""});
  };
  
 /* const routeHandler = () => (
    <Router>
            <Route path="/nextpage" component={NextPage} />
    </Router>
);*/

const routeHandler = props => {
  function handleSubmit(e) {
    e.preventDefault();
    console.log("submitted");
   
    props.history.push("/nextpage");
  }
}



  return (
    <div>
        <form onSubmit={routeHandler}>
      <div className="application-container">
        <label>Application</label>
        <select
          name="application"
          onChange={dropdownHandler}
          value={value.application}
        >
         
            <option></option>
          <option value={application_name}>{application_name}</option>
          <option value="2">2</option>
          <option value="3">3</option>
        </select>
      </div>
      <div className="platform-container">
        <label>Type of platform</label>
        <select
          name="platform"
          onChange={dropdownHandler}
          value={value.platform}
        >
            <option></option>
          <option value="UMR">UMR</option>
          <option value="IVR">IVR</option>
          <option value="middleware">Middleware</option>
        </select>
      </div>
      <button >submit</button>
      </form>
    </div>
   
  );
}

export default Content;

    

i made these changes but not sure how can i add the next page component please help

CodePudding user response：

Declare your routes in App.jsx and push it using useNagivate

Content.jsx

import { useNavigate } from "react-router-dom";

function Content() {
   const navigate = useNavigate();
   const handleSubmit = (e) => {
      e.preventDefault();
      // Do some stuffs
      navigate("/next-page");
   };

   return <form onSubmit={handleSubmit}>  ...  </form>;
}

App.jsx

import { Routes, Route } from "react-router-dom";

<Routes>
    <Route path="/next-page" element={<NextPage />}>
    </Route>
    <Route path="/" element={<Content />}>
    </Route>
</Routes>;