要构建单页应用程序，我们必须有某种方法将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路由。
要定义递归路由，我们可以引用其内部的路由。它的处理方式与其他任何方式都一样。
