Javascript React路由器参数不可访问

我正在尝试接收URI中的“id”。但是我无法收集它

路线：

 <Route path="/reports/:id" >
       {!isLoggedIn ?
          <Redirect to="/login" /> : <UserReport userData={userData} />
       }
 </Route>

---

有没有可能用我正在尝试的方式来实现这一点？请帮助..这是我的第一个React项目。

您可以使用React路由器dom中的useParams方法

import { useParams } from "react-router-dom";
const UserReport = () => {
    const { id } = useParams();
    return (
        <div>
            {id}
        </div>
    );
}

从“react router dom”导入{useParams}；
const UserReport=（）=>{
const{id}=useParams（）；
返回(
{id}
);
}

您可以使用react router dom中的useParams方法

import { useParams } from "react-router-dom";
const UserReport = () => {
    const { id } = useParams();
    return (
        <div>
            {id}
        </div>
    );
}

从“react router dom”导入{useParams}；
const UserReport=（）=>{
const{id}=useParams（）；
返回(
{id}
);
}

检查此项，也许此组件可以解决您的问题@Chaka15谢谢您的建议，但Mohiuddin的回答救了我一天！检查这个，也许这个组件可以解决你的问题@Chaka15谢谢你的建议，但是Mohiuddin的回答救了我一天！

 <Route path="/reports/:id" component={UserReport} >

import { useParams } from "react-router-dom";
const UserReport = () => {
    const { id } = useParams();
    return (
        <div>
            {id}
        </div>
    );
}