Question

我正在使用 react-router-dom 5.2.0，当用户不小心设置了错误或无效的 URL 时，我正在尝试构建一个 404 page。

问题

404 页面在每个路由中呈现。不确定我在这里缺少什么。

router.js

import React, { useEffect } from "react";
import { Route, Switch, useLocation, withRouter } from "react-router-dom";
import Home from "./Pages/home";
import SearchProducts from "./Pages/SearchProducts";
import Product from "./Pages/Product";
import Cart from "./Pages/cart";
import Account from "./Pages/account";
import NotFound from './Pages/404'

export default function Routes(props) {
  function _ScrollToTop(props) {
    const { pathname } = useLocation();
    useEffect(() => {
      window.scrollTo(0, 0);
    }, [pathname]);
    return props.children;
  }
  const ScrollToTop = withRouter(_ScrollToTop);
  return (
    <Switch>
      <ScrollToTop>
        <Route exact path="/" component={Home} />
        <Route exact path="/search" component={SearchProducts} />
        <Route exact path="/product" component={Product} />
        <Route exact path="/cart" component={Cart} />
        <Route exact path="/account" component={Account} />
        <Route component={NotFound}/>
      </ScrollToTop>
    </Switch>
  );
}

Answer 1

查看 404（不匹配）页面的官方 code example。

您只需将 path="*" 添加到您的 <Route component={NotFound}/>

<Route path="*" component={NotFound}/>

正如@Yuriy Yakym 所说，您的 <ScrollToTop> 也引起了问题。请务必保持您的 <Switch> 清洁并遵循官方文档中的指南。

建议：尝试使用滚动到顶部的逻辑创建 HOC。确保 useEffect 不在函数内部，它应该始终位于顶层...了解更多信息 — Rules of Hooks

<块引用>

不要在循环、条件或嵌套函数中调用 Hook。

在所有页面中反应路由器 404 页面渲染

1 个答案: