在react中捕获具有嵌套路由的404页

Question

我想捕捉404页，当用户输入un Uri没有在应用程序中定义。

我有一个Home路由/。在它里面，我有子路由。然后我在顶层有其他路由(与Home相同的级别。

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

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

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

我看到的唯一解决方案是存储所有路由，然后每个页面请求(使用受保护的路由)检查记录的路由是否与现有路由对应，如果不是，则将其重定向到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;

我不能在这里进行剪切，所以这里有一个codesandbox example

Answer 1

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

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