React-Router 是 React 框架中一个非常重要的库，它可以实现前端路由的功能，使得我们可以在单页应用中实现类似于多页应用的效果。在 React-Router 中，参数传递和 404 页面的处理是两个非常重要的问题，本文将详细介绍如何在 React-Router 中实现参数传递和 404 页面不跳转的功能。
参数传递
在 React-Router 中，我们可以通过 URL 中的参数来传递数据，例如在以下的 URL 中：
https://example.com/user/123
其中的 123 就是一个参数，我们可以通过 React-Router 中的 match 对象来获取这个参数。例如，在以下的代码中：
import { useParams } from "react-router-dom";
function User() {
const { id } = useParams();
return <div>User ID: {id}</div>;
}我们使用了 useParams 这个 React Hook 来获取 URL 参数，然后在页面中显示出来。
如果我们需要在多个页面之间传递参数，我们可以使用 React-Router 的 Link 组件来实现。例如，在以下的代码中：
-- -------------------- ---- -------
------ - ---- - ---- -------------------
-------- ------ -
------ -
-----
----- ------------------- ----------
----- ------------------- ----------
------
--
-我们使用了 Link 组件来创建两个链接，分别指向 /user/123 和 /user/456 这两个页面。当用户点击链接时，React-Router 会自动跳转到对应的页面，并且将参数传递过去。
404 页面不跳转
在单页应用中，我们通常希望当用户访问一个不存在的页面时，不会跳转到 404 页面，而是仍然停留在当前页面。这个功能在 React-Router 中也可以很容易地实现。
首先，我们需要在 Router 组件中添加一个 Switch 组件，用来包裹所有的 Route 组件。例如，在以下的代码中：
-- -------------------- ---- -------
------ - ------- ----- - ---- -------------------
-------- ----- -
------ -
--------
--------
------ ----- -------- ---------------- --
------ ---------------- ---------------- --
------ -------------------- --
---------
---------
--
-我们使用了 Switch 组件来包裹了三个 Route 组件，分别对应了三个页面。其中，NotFound 组件是一个自定义的组件，用来显示 404 页面的内容。
在以上的代码中，我们没有给 NotFound 组件指定 path 属性，这意味着它会匹配所有的路径。因此，当用户访问一个不存在的页面时，React-Router 会自动跳转到 NotFound 组件。但是，我们并不希望这个跳转发生，因此我们需要在 NotFound 组件中添加一些代码来阻止这个跳转。
例如，在以下的代码中：
-- -------------------- ---- -------
------ - ----------- - ---- -------------------
-------- ---------- -
----- -------- - --------------
------ -
-----
------- --- ----------
------ --------- --- ------------------- --- --- ----- -- ---- -----------
------
--
-我们使用了 useLocation 这个 React Hook 来获取当前页面的 URL，然后在页面中显示出来。通过这个方法，我们可以在 404 页面中显示出用户访问的页面路径，而不会发生跳转。
结论
在本文中，我们介绍了如何在 React-Router 中实现参数传递和 404 页面不跳转的功能。通过这些技术，我们可以更好地控制单页应用的行为，提高用户体验。同时，我们也可以发现，React-Router 中的一些功能是非常强大的，可以帮助我们更快地开发出高质量的单页应用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6769635798e3e1ab1a8fe2ff