[FIXED] how can i pass a ref route on post request in react js.?

Issue

Iam trying to create a dynamic route in react js. what i want is whenever user passes a value in my route it should check from the api if that value exists it should display a particular page. Iam sending a post request and getting back some data but iam unable to link it with my route. below is my code. also i want to know how can i verify the value user entered exists in my api.

my component

import React from "react";
import { useState, useEffect } from "react";
import { SignUpModal } from "../User/Signup/index";
import axios from "axios";
import { getToken } from "../../common/constants/variables";

function Reference() {
  const [ref, setRef] = useState([]);
  axios
  .post(
    "https://theappsouk.com/api/v1/check-referral",
    {
      ref: ref,
    }
  )
  .then((response) => setRef(response.data));
console.log(JSON.stringify(ref))
  return (
    <div>
      <h1>Hello </h1>
    </div>
  );
}
export default Reference;

my route

<Switch> 
<Route path="/home" component{Home}/>
<Route path="/about" component{About}/>
<Route path="/contact" component{Contact}/>
<Route path="/ref" component{Reference}/> here i want to pass my ref object from above
</Switch>

here in ref i want to pass my data that is my ref which is to be checked against api.

Solution

<Route path="/:ref" component{Reference} />

const { useParams } from "react-router-dom";

function Reference() {
 let { ref } = useParams();
 
  ...
}

Answered By - Alexandre

Answer Checked By - Terry (PHPFixing Volunteer)