React路由配置：URL不存在时重定向至首页的实现方案

要实现用户访问不存在页面时的重定向，只需在<Switch>组件的最后添加兜底路由，捕获所有未匹配到的路径，再根据需求重定向到首页或自定义错误页面即可。

方案1：重定向到首页 #

在现有所有路由和重定向规则之后，添加一个不带path属性的<Redirect>（或指定path="*"），所有未匹配的路径都会被导向首页：

function App() {
  return (
    <div className="app">
      <Suspense fallback={<div>Loading...</div>}>
        <Router history={history}>
          <Header />
          <div className="app-container">
            <Switch>
              {routes.map(
                ({ key, path, crumbs, renderComponent }) => {
                  return (
                    <Route key={key} path={path}>
                      {renderComponent(crumbs)}
                    </Route>
                  )
                }
              )}
              <Redirect exact from="/" to="/merchants" />
              {/* 新增：捕获所有未匹配路径，重定向到首页 */}
              <Redirect to="/merchants" />
            </Switch>
          </div>
          <div className="footer-wrapper">
            <div className="footer">
              <footer max-width="1920"></footer>
            </div>
          </div>
        </Router>
      </Suspense>
    </div>
  )
}

方案2：跳转到自定义错误页面 #

如果需要展示专门的404错误页面，先创建错误页面组件，再在<Switch>最后添加匹配所有路径的<Route>：

// 定义自定义错误页面组件
function ErrorPage() {
  return (
    <div className="error-page">
      <h1>404 - 页面不存在</h1>
      <p>你访问的页面不存在，<a href="/merchants">返回首页</a></p>
    </div>
  )
}

// 修改App组件
function App() {
  return (
    <div className="app">
      <Suspense fallback={<div>Loading...</div>}>
        <Router history={history}>
          <Header />
          <div className="app-container">
            <Switch>
              {routes.map(
                ({ key, path, crumbs, renderComponent }) => {
                  return (
                    <Route key={key} path={path}>
                      {renderComponent(crumbs)}
                    </Route>
                  )
                }
              )}
              <Redirect exact from="/" to="/merchants" />
              {/* 新增：捕获所有未匹配路径，渲染错误页面 */}
              <Route path="*">
                <ErrorPage />
              </Route>
            </Switch>
          </div>
          <div className="footer-wrapper">
            <div className="footer">
              <footer max-width="1920"></footer>
            </div>
          </div>
        </Router>
      </Suspense>
    </div>
  )
}

关键注意点 #

• <Switch>组件会从上到下匹配第一个符合条件的路由，因此兜底路由必须放在所有其他路由的最后，确保只有前面的路由都不匹配时才会触发。
• 使用path="*"的路由会匹配任何路径，刚好适合作为404场景的兜底规则。

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