[React Router v4] Render Catch-All Routes with the Switch Component

最新推荐文章于 2025-09-09 16:55:30 发布

weixin_34106122

最新推荐文章于 2025-09-09 16:55:30 发布

阅读量94

点赞数

文章标签： javascript ViewUI

本文介绍如何在 React Router v4 中设置一个通用的 404 路由，当用户访问不存在的页面时显示 'Page not found'。通过使用 Switch 和 Route 组件，可以轻松实现自定义的错误页面展示。

There are many cases where we will need a catch-all route in our web applications. This can include 404-style routes when nothing is match or other use cases where where we receive an invalid route in React Router v4.

We can use 'Switch' from 'react-router-dom', what 'Switch' will do is only render the first route that matches.

To make a fallback Route, all we need to do is define a Route without any path.

<Route render={() => <h1>Page not found</h1>} />

import React from 'react';
import {
  BrowserRouter as Router,
  Route,
  Link,
  Switch,
} from 'react-router-dom';


const Links = () =>
    <nav>
      <Link to="/">Home</Link>
      <Link to="/about">About</Link>
      <Link to="/contact/xxx/xxx/xxxx/x">Contact</Link>
    </nav>

const App = (props) => (
  <Router basename={props.path}>
    <div>
      <Links />
      <Switch>
        <Route exact path="/" render={() => <h1>Home</h1>} />
        <Route path="/about" render={() => <h1>About</h1>} />
        <Route render={() => <h1>Page not found</h1>} />
      </Switch>
    </div>
  </Router>
)

export default App