如果未找到 URL，则重定向到主页

Question

对于以下情况，如果输入 url 未找到，我必须重定向到主页。

当用户尝试访问不可用的页面时，它应该重定向到主页或错误页面。 代码： *

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" />
            </Switch>
          </div>
          <div className="footer-wrapper">
            <div className="footer">
              <footer max-width="1920"></footer>
            </div>
          </div>
        </Router>
      </Suspense>
    </div>
  )
}

Answer 1

添加另一个Redirect来处理任何在其上方未由Route或Redirect组件在更具体的路径上呈现的路由路径。

<Switch>
  {routes.map(({ key, path, crumbs, renderComponent }) => (
    <Route key={key} path={path}>
      {renderComponent(crumbs)}
    </Route>
  ))}
  <Redirect exact from="/" to="/merchants" />
  <Redirect to="/" />
</Switch>

由于"/merchants"路由似乎是您的默认主页，您可以删除exact to道具并处理以前未处理的任何路由路径。

<Switch>
  {routes.map(({ key, path, crumbs, renderComponent }) => (
    <Route key={key} path={path}>
      {renderComponent(crumbs)}
    </Route>
  ))}
  <Redirect to="/merchants" />
</Switch>