如何配置React Router Switch实现未匹配路由无跳转不展示404页面

基础实现（仅不展示404内容） #

如果你只需要未匹配路由时不渲染任何404相关内容，直接在通配符路由中返回null即可，修改你的代码如下：

<Switch>
    <Route path="/" exact>
      <LandingPage />
    </Route>
    <Route path="/login" exact>
      <LandingPage />
    </Route>
    <Route path="/new-account" exact>
      <LandingPage />
    </Route>

    <Route path="/account-settings" exact>
      <AccountSettings />
    </Route>

    <Route path="/dashboard" exact>
      <Dashboard userStatus={userStatus} />
    </Route>
    
    <Route path="*">
      {null}
    </Route>
</Switch>

注意：该方案下如果用户输入/跳转到未匹配路径，浏览器地址栏的URL会同步变更，仅不会渲染额外内容。

进阶实现（跳转未匹配路由时同时保留原有URL） #

如果需要连地址栏URL都不修改，仅针对React Router内部触发的跳转（点击<Link>、调用history.push/replace）场景可以通过历史栈回退实现，代码如下：

1. 首先定义一个空处理路由组件

import { useHistory, useEffect } from 'react-router-dom'

const NoMatchRoute = () => {
  const history = useHistory()
  useEffect(() => {
    // 撤销本次无效跳转，回到上一个有效历史记录
    history.goBack()
  }, [history])
  return null
}

2. 替换通配符路由配置

<Route path="*">
  <NoMatchRoute />
</Route>

边界说明：如果用户手动在浏览器地址栏输入未匹配路由，浏览器本身已经完成URL修改，该场景属于浏览器原生行为，React Router无法阻止地址栏变更，如果你需要该场景下也回到有效页面，可以将history.goBack()替换为history.push('/')跳转到首页，但URL会发生修改。

React Router v6 适配说明 #

v6版本已经废弃Switch组件改用Routes，逻辑完全一致，仅写法调整为：

<Routes>
  {/* 其他原有路由配置 */}
  <Route path="*" element={<NoMatchRoute />} />
</Routes>

内容的提问来源于stack exchange，提问作者George25