使用getelementbyid给图片的路径_使用React Router创建404和递归路由

要构建单页应用程序，我们必须有某种方法将URL映射到要显示的React组件。

在本文中，我们将研究如何使用React Router创建404路由和递归路径。

404路由

我们可以创建404路由以在添加的路线均不匹配时显示某些内容。

为此，我们可以使用星号作为通配符。

例如，我们可以编写以下代码：

import React from "react";import ReactDOM from "react-dom";import { BrowserRouter as Router, Switch, Route, Link } from "react-router-dom";function Home() {  return 

主页

;}function About() { return

关于

;}function NotFound() { return

不存在

;}function App() { return (

Home About 不存在

);}const rootElement = document.getElementById("root");ReactDOM.render(, rootElement);

在上面的代码中，我们具有以下路由的 Switch 组件：

它将匹配与其他路线不匹配的任何URL。

因此，当我们单击“不存在”链接时，将看到“不存在”。

当我们输入其他 / 或 /about 作为相对路径时，这也适用。

* 是通配符，用于匹配任何内容。

递归路由

与其他路由一样，我们可以递归定义路由，唯一的区别是，我们使用自身引用了 Route 中的组件。

例如，如果我们有一个邻居 NEIGHBORS 数组，如下所示：

const NEIGHBORS = [  { id: 0, name: "张三", neighbors: [1, 2, 3] },  { id: 1, name: "张小二", neighbors: [0, 3] },  { id: 2, name: "张大爷", neighbors: [0, 1, 3] },  { id: 3, name: "张大婶", neighbors: [1, 2] }];

其中 neighbors 数组引用其他条目的 id。

然后，我们可以定义一个 Neighbor 组件并按如下方式使用它：

import React from "react";import ReactDOM from "react-dom";import { BrowserRouter as Router, Switch, Route, Link } from "react-router-dom";import { useParams, useRouteMatch, Redirect } from "react-router";const NEIGHBORS = [  { id: 0, name: "张三", neighbors: [1, 2, 3] },  { id: 1, name: "张小二", neighbors: [0, 3] },  { id: 2, name: "张大爷", neighbors: [0, 1, 3] },  { id: 3, name: "张大婶", neighbors: [1, 2] }];const find = id => {  return NEIGHBORS.find(p => p.id === id);};function Neighbor() {  const { url } = useRouteMatch();  const { id } = useParams();  const neighbor = find(+id);  return (    

{neighbor.name} 的邻居

{neighbor.neighbors.map(id => ( {find(id).name} ))}

);}function App() { return ( );}const rootElement = document.getElementById("root");ReactDOM.render(, rootElement);

在上面的代码中，我们具有 find 函数，使查找邻居变得容易。

然后在 Neighbor 组件中，我们有：

const { id } = useParams();const neighbor = find(+id);

从URL获取 id，然后使用 find 函数查找与之相邻的 neighbor。

然后我们通过书写来显示邻居的邻居：

{neighbor.neighbors.map(id => ( {find(id).name} ))}

然后，我们有了一个 Switch 组件，它在 Route 中再次具有 Neighbor：

这是递归的部分，因为邻居在这里引用了自己。我们将 path 设置为 ${url}/:id，以便在单击上面的 Link 时，将看到新的邻居。

然后在App中，我们只需要常规的路由。再一次，我们有 path="/:id" 来查找邻居的 id。

总结

通过将 Route 的 path 值设置为星号，我们可以轻松定义404路由。

要定义递归路由，我们可以引用其内部的路由。它的处理方式与其他任何方式都一样。

---

如果对你有所启发和帮助，可以点个关注、收藏、转发，也可以留言讨论，这是对作者的最大鼓励。

作者简介：Web前端工程师，全栈开发工程师、持续学习者。

私信回复：大礼包，送某网精品视频课程网盘资料，准能为你节省不少钱！