reactjs - 我如何在 React js 中通过 post 请求的 ref 路由？

Question

我正在尝试在 react js 中创建动态路由。我想要的是每当用户在我的路由中传递一个值时，它应该从 api 检查该值是否存在，它应该显示一个特定的页面。我正在发送一个发布请求并取回一些数据，但我无法将它与我的路线链接起来。下面是我的代码。我也想知道如何验证用户输入的值是否存在于我的 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 进行检查。

Answer 1

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

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

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