我如何在 React js 中传递 post 请求的 ref 路由？

Question

我正在尝试在 React js 中创建动态路由。我想要的是，每当用户在我的路线中传递一个值时，它应该从 api 检查该值是否存在，它应该显示一个特定的页面。我正在发送 post 请求并取回一些数据，但我无法通过我的路线 link 它。下面是我的代码。我还想知道如何验证用户输入的值是否存在于我的 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();
 
  ...
}

我如何在 React js 中传递 post 请求的 ref 路由？

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

reactjs

api

pass-by-reference

react-router-dom

dynamic-routing