我该如何在react js中对发布请求传递引用路由？？

如何解决我该如何在react js中对发布请求传递引用路由？？

我正在尝试在react js中创建动态路由。我想要的是每当用户在我的路线中传递值时，都应从api检查该值是否存在，它应该显示特定页面。 Iam发送发帖请求并获取一些数据，但Iam无法将其与我的路线链接。下面是我的代码。我也想知道如何验证用户输入的值是否在我的api中。

我的组件

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;

我的路线

<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>

在ref中，我想传递我的数据，即我的ref，将根据api进行检查。

解决方法

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

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

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