在反应中捕获具有嵌套路由的 404 页面

Question

当用户输入未在应用程序中定义的 un Uri 时，我想捕捉 404 页面。

我有一个 Home 路线 / 。在里面我有儿童路线。 然后我在顶层有其他路线（与Home相同的级别。

我的问题是子路由/children1/children2

当我输入 /strangeRoutereact 时，会加载 / 的内容，然后是 404 页面。

那是因为我没有在Home 路由中应用exact。而且我不应该添加它，因为我应该显示 Home content + Children1/Children2 content ，而不是一个或一个子路由。

我看到的唯一解决方案是存储所有路由，然后每个页面请求（使用受保护的路由）检查录音路由是否对应于现有路由，如果不将其重定向到 404 页面。

有没有更简单的方法？

import React from "react";
import {
  BrowserRouter as Router,
  Route, // for later
  Link
} from "react-router-dom";

const topics = [
  {
    name: "React Router",
    id: "react-router",
  },
  {
    name: "React.js",
    id: "reactjs",
  },
  {
    name: "Functional Programming",
    id: "functional-programming",
  }
];

function Home() {
  return (
    <div>
      <h1>Topics</h1>
      <ul>
        {topics.map(({ name, id }) => (
          <li key={id}>
            <Link to={`/${id}`}>{name}</Link>
          </li>
        ))}
      </ul>

      <hr />
      <Route exact path={`/react-router`} component={Topic} />
      <Route exact path={`/reactjs`} component={Topic} />
      <Route exact path={`/functional-programming`} component={Topic} />
    </div>
  );
}

function Topic() {
  return <div>TOPIC</div>;
}

function NotFound() {
  return <div>Page 404</div>;
}

class App extends React.Component {
  render() {
    return (
      <Router>
        <Route path="/" component={Home} />
        <Route component={NotFound} />
      </Router>
    );
  }
}

export default App;

我无法在这里截取，所以这里是一个代码框example

Answer 1

看看这个使用重定向的解决方案：

https://codesandbox.io/s/nested-routes-4-forked-scebd?file=/src/App.js