如何显示在基地 url 上找不到

Question

这是代码：

应用程序

import { Route, BrowserRouter as Router, Routes } from "react-router-dom";
import ClassroomDashboard from "./ClassroomDashboard";
import Students from "./Students";
import NotFound from "./NotFound";
import Base from "./Base";
import "./styles.css";

export default function App() {
  return (
    <Router>
      <Routes>
        <Route path="/" element={<Base />}>
          <Route path="dashboard" element={<ClassroomDashboard />} />
          <Route path="students" element={<Students />} />
          <Route index element={<NotFound />} />
        </Route>
      </Routes>
    </Router>
  );
}

基地

import { Outlet } from "react-router-dom";

function Base() {
  return <Outlet />;
}

export default Base;

未找到

function NotFound() {
  return "NotFound";
}

export default NotFound;

https://codesandbox.io/s/summer-sound-giti8c?file=/src/App.js

我希望当有人去基地时 url 说 https://giti8c.csb.app/ 然后应该渲染 NotFound 组件。

目前，只有 Base 组件在到达基础 url 时呈现。

Answer 1

I want that when someone goes to the base url say "https://giti8c.csb.app/" then NotFound component should be rendered.

创建一个同时渲染NotFound组件的索引路由，仅当路径完全匹配渲染Outlet的父路由时才会被匹配和渲染] 组件。

见Index Routes

示例：

<Router>
  <Routes>
    <Route path="/" element={<Base />}>
      <Route index element={<NotFound />} />
      <Route path="dashboard" element={<ClassroomDashboard />} />
      <Route path="students" element={<Students />} />
    </Route>
    <Route path="*" element={<NotFound />} />
  </Routes>
</Router>

如何显示在基地 url 上找不到

How to show not found on base url

javascript

reactjs

react-router-dom