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

Question

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

的页面

"/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。

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

How to check for a randomly generated url that begins with a phrase with Route hook in reactjs

javascript

reactjs

server-side-rendering