如何检查随机生成的url，该url以reactjs中的Route hook短语开头

Question

我正在尝试建立一个网站，在那里你可以注册人员，它会将他们的信息添加到数据库中。然后你可以在主页上搜索这些人的名字，它会根据名字过滤结果。每个弹出的与搜索字符串相似的名称都将是reactjs的链接挂钩，它将带您进入路径名为：的页面

"/student_info_"+element

在这个页面上会有此人的信息。我在App.js上呈现页面时遇到了问题，因为它生成了部分随机的url，而我在App.js中的代码是：

return (
<div>
<Switch>
<Route path="/" exact>
<MainPage />
</Route>
<Route path="/register_student">
<RegisterPage />
</Route>
<Route path="/student_info_">
<StudentInfo />
</Route>
</Switch>
</div>
);

无论出于什么原因，这似乎都不起作用。我在学生信息页面中测试了这一点，我包括：

return (
<div className="btn-textfield">
{pathName}

</div>
);

当我在学生信息页面上时，它不会显示任何信息。我很确定这个问题是在App.js中检查url的路径名并显示正确的页面，但我不确定如何解决它。我感谢任何回复。

Answer 1

我相信您正在查找路由参数。

在App.js中，您可以执行：

<Route path="/student_info/:id">
<StudentInfo />
</Route>

然后在StudentInfo组件中，您可以获得当前路由的:id部分，如下所示：

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

如果你想让路径看起来完全像/student_info_%ID%，你也可以使用相同的方法&将该路径的整个部分处理为CCD_ 5。