如何在reactjs中检查以带Route钩子的短语开头的随机生成的url

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%完全一样，也可以使用相同的方法来实现&将路径的这一部分视为:id。