没有路由匹配位置后的默认 ErrorPage 元素（错误 url）React-Router 6.2.1

Question

嗨，我正在学习 React，但遇到了一些问题。当 url 与 none 路径不匹配时，我不会显示错误元素。

我创建了 ErrorPage 元素但仍然收到此警告“没有路线匹配位置”。

这是我写的代码：

import React, { Component } from "react";
import {
  BrowserRouter as Router,
  NavLink,
  Route,
  Routes,
} from "react-router-dom";
import "./App.css";

const Home = () => <h1>Home</h1>;

const News = () => <h1>News</h1>;

const Contact = () => <h1>Contact</h1>;

const ErrorPage = () => <h1>Page not found</h1>;

class App extends Component {
  state = {};
  render() {
    return (
      <Router>
        <div>
          <header>
            <nav>
              <ul>
                <li>
                  <NavLink to="/">Home</NavLink>
                </li>
                <li>
                  <NavLink to="/news">News</NavLink>
                </li>
                <li>
                  <NavLink to="/contact">Contact</NavLink>
                </li>
              </ul>
            </nav>
          </header>
          <section>
            <Routes>
              <Route path="/" element={<Home />} />
              <Route path="/news" element={<News />} />
              <Route path="/contact" element={<Contact />} />
              <Route element={<ErrorPage />} />
            </Routes>
          </section>
        </div>
      </Router>
    );
  }
}

export default App;

Answer 1

正在替换

<Route element={<ErrorPage />} />

和

<Route path="*" element={<ErrorPage />} />

会成功的。

没有路由匹配位置后的默认 ErrorPage 元素（错误 url）React-Router 6.2.1

Default ErrorPage element after no routes matched location (wrong url) React-Router 6.2.1

javascript

reactjs

react-router

react-router-dom