46、高级 URL 路由深入解析

最新推荐文章于 2025-11-03 04:44:30 发布

transformer2023

最新推荐文章于 2025-11-03 04:44:30 发布

阅读量12

点赞数

CC 4.0 BY-SA版权

分类专栏：深入React 16核心原理文章标签： URL路由 React Router 可选参数

本文链接：https://blog.youkuaiyun.com/transformer2023/article/details/154552414

深入React 16核心原理专栏收录该内容

53 篇文章 ¥499.90

订阅专栏¥69.90

会员秒杀 ¥9.9 重磅福利

超级会员免费看

高级 URL 路由深入解析

在现代 Web 应用开发中，URL 路由是实现单页面应用（SPA）导航的关键部分。合理的路由设计能够提升用户体验，使应用的导航更加流畅和灵活。本文将深入探讨高级 URL 路由的相关技术，包括可选 URL 参数的使用、在其他组件中访问路由数据、编程式导航以及导航前提示用户等内容。

1. 使用可选 URL 参数

在路由配置中，有时候我们希望一个 URL 路径能够匹配多种情况，而不需要为每种情况都单独配置一个 Route 组件。这时，可选 URL 参数就派上用场了。可选 URL 参数通过在参数名后面加上问号（ ? ）来表示。

例如，当添加了 URL 参数后， /info URL 可能不再能被 Route 组件匹配。为了解决这个问题，我们可以使用可选参数。以下是具体的代码示例：

import React, { Component } from "react";
import { BrowserRouter as Router, NavLink, Route, Switch, Redirect }
    from "react-router-dom";
import { ProductDisplay } from "./ProductDisplay";
import { SupplierDisplay } from "./SupplierDisplay";
import { RouteInfo } from "./routing/RouteInfo";

export class Selector extends Component {
    render() {
        return <Router>
            <div className="container-fluid">
                <div className="row">
                    <div className="col-2">
                        <NavLink className="m-2 btn btn-block btn-primary"
                            activeClassName="active"
                            to="/products">Products</NavLink>
                        <NavLink className="m-2 btn btn-block btn-primary"
                            activeClassName="active"
                            to="/suppliers">Suppliers</NavLink>
                        <NavLink className="m-2 btn btn-block btn-primary"
                            activeClassName="active"
                            to="/info/match">Match</NavLink>
                        <NavLink className="m-2 btn btn-block btn-primary"
                            activeClassName="active"
                            to="/info/location">Location</NavLink>
                        <NavLink className="m-2 btn btn-block btn-primary"
                            activeClassName="active" to="/info">All Info</NavLink>
                    </div>
                    <div className="col">
                        <Switch>
                            <Route path="/products" component={ ProductDisplay} />
                            <Route path="/suppliers" component={ SupplierDisplay } />
                            <Route path="/info/:datatype?" component={ RouteInfo } />
                            <Redirect to="/products" />
                        </Switch>
                    </div>
                </div>
            </div>
        </Router>
    }
}

在上述代码中， /info/:datatype? 表示 datatype 是一个可选参数。如果 URL 中没有对应的 datatype 段，路径仍然会匹配，但 datatype 的值将为 undefined 。

接下来，我们需要更新 RouteInfo 组件，以便在没有 datatype 值时显示 match 和 location 对象的详细信息：

import React, { Component } from "react";
import { Link } from "react-router-dom";

export class RouteInfo extends Component {
    renderTable(title, prop, propertyNames) {
        return <React.Fragment>
            <tr><th colSpan="2" className="text-center">{ title }</th></tr>
            { propertyNames.map(p =>
                <tr key={p }>
                    <td>{ p }</td>
                    <td>{ JSON.stringify(prop[p]) }</td>
                </tr>)
            }
        </React.Fragment>
    }
    render() {
        return <div className="bg-info m-2 p-2">
            <h4 className="text-white text-center">Route Info</h4>
            <table className="table table-sm table-striped bg-light">
                <tbody>
                    { (this.props.match.params.datatype === undefined ||
                            this.props.match.params.datatype ==="match")
                        && this.renderTable("Match", this.props.match,
                            ["url", "path", "params", "isExact"] )}
                    { (this.props.match.params.datatype === undefined ||
                            this.props.match.params.datatype === "location")
                        &&  this.renderTable("Location", this.props.location,
                            ["key", "pathname", "search", "hash", "state"] )}
                </tbody>
            </table>
            <div className="text-center m-2 bg-light">
                <Link className="btn btn-primary m-2"
                    to={ this.props.location }>Location</Link>
            </div>
        </div>
    }
}

通过这种方式，组件可以响应更广泛的 URL，而无需使用额外的 Route 组件。

2. 在其他组件中访问路由数据

Route 组件会将路由相关的属性添加到它所显示的组件中，但无法直接将这些属性提供给其他组件，包括它所显示组件的后代组件。为了避免属性层层传递（prop threading），React-Router 包提供了两种不同的方法来让后代组件访问路由数据。

2.1 直接在组件中访问路由数据

最直接的方法是在 render 方法中使用 Route 组件。以下是一个示例，我们创建了一个 ToggleLink 组件：

import React, { Component } from "react";
import { Route, Link } from "react-router-dom";

export class ToggleLink extends Component {
    render() {
        return <Route path={ this.props.to } exact={ this.props.exact }
                children={ routeProps => {
            const baseClasses = this.props.className || "m-2 btn btn-block";
            const activeClass = this.props.activeClass || "btn-primary";
            const inActiveClass = this.props.inActiveClass || "btn-secondary"
            const combinedClasses = `${baseClasses} ${routeProps.match ? activeClass : inActiveClass}`
            return <Link to={ this.props.to } className={ combinedClasses }>
                        { this.props.children }
                    </Link>
         }} />
    }
}

在这个组件中， Route 组件的 children 属性用于渲染内容，无论当前 URL 是什么。它被赋值为一个函数，该函数接收路由上下文数据。 path 属性用于指定感兴趣的 URL，当当前 URL 与 path 匹配时，传递给 children 函数的 routeProps 对象包含一个 match 对象，该对象定义了一些属性。

ToggleLink 组件解决了 NavLink 组件与 Bootstrap CSS 框架之间的一个小问题。 NavLink 在匹配路径时会为渲染的锚元素添加一个类，在其他时候移除该类。但对于某些 Bootstrap 类的组合，这种方式可能会导致问题，因为 CSS 样式表中类的定义顺序可能会影响样式的应用。而 ToggleLink 组件通过在有 match 对象时添加活动类，在没有匹配时添加非活动类来解决这个问题。

我们可以在 Selector 组件中使用 ToggleLink 组件来替换 NavLink 组件：

import React, { Component } from "react";
import { BrowserRouter as Router, Route, Switch }
    from "react-router-dom";
import { ProductDisplay } from "./ProductDisplay";
import { SupplierDisplay } from "./SupplierDisplay";
import { RouteInfo } from "./routing/RouteInfo";
import { ToggleLink } from "./routing/ToggleLink";

export class Selector extends Component {
    render() {
        return <Router>
            <div className="container-fluid">
                <div className="row">
                    <div className="col-2">
                        <ToggleLink to="/products">Products</ToggleLink>
                        <ToggleLink to="/suppliers">Suppliers</ToggleLink>
                        <ToggleLink to="/info/match">Match</ToggleLink>
                        <ToggleLink to="/info/location">Location</ToggleLink>
                        <ToggleLink to="/info" exact={ true }>All Info</ToggleLink>
                    </div>
                    <div className="col">
                        <Switch>
                            <Route path="/products" component={ ProductDisplay} />
                            <Route path="/suppliers" component={ SupplierDisplay } />
                            <Route path="/info/:datatype?" component={ RouteInfo } />
                        </Switch>
                    </div>
                </div>
            </div>
        </Router>
    }
}

2.2 使用高阶组件访问路由数据

withRouter 函数是一个高阶组件，它可以让组件在不直接使用 Route 组件的情况下访问路由系统。当一个组件被传递给 withRouter 时，它会接收 match 、 location 和 history 对象作为属性，就好像它是由 Route 组件使用 component 属性直接渲染的一样。

以下是一个示例，我们使用 withRouter 函数让 RouteInfo 组件可以在 Route 组件之外使用：

import React, { Component } from "react";
import { BrowserRouter as Router, Route, Switch, withRouter }
    from "react-router-dom";
import { ProductDisplay } from "./ProductDisplay";
import { SupplierDisplay } from "./SupplierDisplay";
import { RouteInfo } from "./routing/RouteInfo";
import { ToggleLink } from "./routing/ToggleLink";

const RouteInfoHOC = withRouter(RouteInfo)

export class Selector extends Component {
    render() {
        return <Router>
            <div className="container-fluid">
                <div className="row">
                    <div className="col-2">
                        <ToggleLink to="/products">Products</ToggleLink>
                        <ToggleLink to="/suppliers">Suppliers</ToggleLink>
                        <ToggleLink to="/info/match">Match</ToggleLink>
                        <ToggleLink to="/info/location">Location</ToggleLink>
                        <ToggleLink to="/info" exact={ true }>All Info</ToggleLink>
                    </div>
                    <div className="col">
                        <RouteInfoHOC />
                        <Switch>
                            <Route path="/products" component={ ProductDisplay} />
                            <Route path="/suppliers" component={ SupplierDisplay } />
                            <Route path="/info/:datatype?" component={ RouteInfo } />
                        </Switch>
                    </div>
                </div>
            </div>
        </Router>
    }
}

withRouter 函数为 RouteInfo 组件提供了所需的数据，即使它不是由 Route 组件显示的。不过， withRouter 函数不提供路径匹配支持，这意味着 match 对象的作用有限，但 location 对象可以提供应用当前位置的详细信息， history 对象可以用于编程式导航。

3. 编程式导航

并非所有的导航都可以使用 Link 或 NavLink 组件来处理，特别是当应用需要在响应某个事件时执行一些内部操作，然后再进行导航时。 history 对象为组件提供了一个 API，允许通过编程方式访问路由系统。

以下是 history 对象的一些常用方法：
| 方法名 | 描述 |
| ---- | ---- |
| push(path) | 导航到指定路径，并在浏览器历史记录中添加一个新条目。可以提供一个可选的 state 属性，该属性可以通过 location.state 属性访问。 |
| replace(path) | 导航到指定路径，并替换浏览器历史记录中的当前位置。可以提供一个可选的 state 属性，该属性可以通过 location.state 属性访问。 |
| goBack() | 导航到浏览器历史记录中的上一个位置。 |
| goForward() | 导航到浏览器历史记录中的下一个位置。 |
| go(n) | 导航到距离当前位置 n 个位置的历史记录位置。使用正值向前移动，使用负值向后移动。 |
| block(prompt) | 阻止导航，直到用户响应一个提示框，这在“导航前提示用户”部分会详细介绍。 |

我们可以在 ToggleLink 组件中使用编程式导航，将 Link 组件替换为按钮：

import React, { Component } from "react";
import { Route } from "react-router-dom";

export class ToggleLink extends Component {
    handleClick = (history) => {
        history.push(this.props.to);
    }
    render() {
        return <Route path={ this.props.to } exact={ this.props.exact }
                children={ routeProps => {
            const baseClasses = this.props.className || "m-2 btn btn-block";
            const activeClass = this.props.activeClass || "btn-primary";
            const inActiveClass = this.props.inActiveClass || "btn-secondary"
            const combinedClasses = `${baseClasses} ${routeProps.match ? activeClass : inActiveClass}`
            return  <button className={ combinedClasses }
                        onClick={ () => this.handleClick(routeProps.history) }>
                        {this.props.children}
                    </button>
         }} />
    }
}

在上述代码中，点击按钮时， onClick 处理程序将 history 对象传递给 handleClick 方法，该方法使用 push 方法导航到 to 属性指定的位置。

另一种编程式导航的方法是使用组件来实现。我们可以修改 ToggleLink 组件，使其点击按钮时更新状态数据，从而渲染 Redirect 组件：

import React, { Component } from "react";
import { Route, Redirect } from "react-router-dom";

export class ToggleLink extends Component {
    constructor(props) {
        super(props);
        this.state = {
            doRedirect: false
        }
    }
    handleClick = () => {
        this.setState({ doRedirect: true},
            () => this.setState({ doRedirect: false }));
    }
    render() {
        return <Route path={ this.props.to } exact={ this.props.exact }
                children={ routeProps => {
            const baseClasses = this.props.className || "m-2 btn btn-block";
            const activeClass = this.props.activeClass || "btn-primary";
            const inActiveClass = this.props.inActiveClass || "btn-secondary"
            const combinedClasses = `${baseClasses} ${routeProps.match ? activeClass : inActiveClass}`
            return  <React.Fragment>
                { this.state.doRedirect && <Redirect to={ this.props.to } /> }
                <button className={ combinedClasses } onClick={ this.handleClick }>
                    {this.props.children}
                </button>
            </React.Fragment>
         }} />
    }
}

点击按钮时， doRedirect 属性被设置为 true ，触发更新并渲染 Redirect 组件。之后， doRedirect 属性会自动设置回 false ，以便组件恢复正常渲染。选择哪种编程式导航的方法取决于个人偏好和编码风格。

4. 导航前提示用户

在某些情况下，我们可能需要在用户导航前提示他们，以避免意外丢失表单数据等情况。可以通过渲染 Prompt 组件来实现这一点。 Prompt 组件支持以下属性：
| 属性名 | 描述 |
| ---- | ---- |
| message | 定义显示给用户的消息。可以是一个字符串，也可以是一个接受 location 对象并返回字符串的函数。 |
| when | 只有当该属性的值为 true 时才会提示用户，可以用于有条件地阻止导航。 |

以下是在 Selector 组件中添加 Prompt 组件的示例：

import React, { Component } from "react";
import { BrowserRouter as Router, Route, Switch, Prompt, withRouter }
    from "react-router-dom";
import { ProductDisplay } from "./ProductDisplay";
import { SupplierDisplay } from "./SupplierDisplay";
import { RouteInfo } from "./routing/RouteInfo";
import { ToggleLink } from "./routing/ToggleLink";

const RouteInfoHOC = withRouter(RouteInfo)

export class Selector extends Component {
    render() {
        return <Router>
            <div className="container-fluid">
                <div className="row">
                    <div className="col-2">
                        <ToggleLink to="/products">Products</ToggleLink>
                        <ToggleLink to="/suppliers">Suppliers</ToggleLink>
                        <ToggleLink to="/info/match">Match</ToggleLink>
                        <ToggleLink to="/info/location">Location</ToggleLink>
                        <ToggleLink to="/info" exact={ true }>All Info</ToggleLink>
                    </div>
                    <div className="col">
                        <Prompt message={ loc =>
                            `Do you want to navigate to ${loc.pathname}`} />
                        <RouteInfoHOC />
                        <Switch>
                            <Route path="/products" component={ ProductDisplay} />
                            <Route path="/suppliers" component={ SupplierDisplay } />
                            <Route path="/info/:datatype?" component={ RouteInfo } />
                        </Switch>
                    </div>
                </div>
            </div>
        </Router>
    }
}

当点击 ToggleLink 组件渲染的按钮时，会提示用户确认导航。

5. 自定义导航提示

BrowserRouter 和 HashRouter 组件提供了 getUserConfirmation 属性，可以用自定义函数替换默认的提示框。我们可以创建一个自定义提示组件 CustomPrompt ：

import React, { Component } from "react";

export class CustomPrompt extends Component {
    render() {
        if (this.props.show) {
            return <div className="alert alert-warning m-2 text-center">
                <h4 className="alert-heading">Navigation Warning</h4>
                    { this.props.message }
                <div className="p-1">
                    <button className="btn btn-primary m-1"
                        onClick={ () => this.props.callback(true) }>
                            Yes
                    </button>
                    <button className="btn btn-secondary m-1"
                        onClick={ () => this.props.callback(false )}>
                            No
                    </button>
                </div>
            </div>
        }
        return null;
    }
}

然后在 Selector 组件中应用这个自定义提示组件：

import React, { Component } from "react";
import { BrowserRouter as Router, Route, Switch, Prompt, withRouter }
    from "react-router-dom";
import { ProductDisplay } from "./ProductDisplay";
import { SupplierDisplay } from "./SupplierDisplay";
import { RouteInfo } from "./routing/RouteInfo";
import { ToggleLink } from "./routing/ToggleLink";
import { CustomPrompt } from "./routing/CustomPrompt";

const RouteInfoHOC = withRouter(RouteInfo)

export class Selector extends Component {
    constructor(props) {
        super(props);
        this.state = {
            showPrompt: false,
            message: "",
            callback: () => {}
        }
    }
    customGetUserConfirmation = (message, navCallback) => {
        this.setState({
            showPrompt: true, message: message,
            callback: (allow) => { navCallback(allow);
                this.setState({ showPrompt: false}) }
        });
    }
    render() {
        return <Router getUserConfirmation={ this.customGetUserConfirmation }>
            <div className="container-fluid">
                <div className="row">
                    <div className="col-2">
                        <ToggleLink to="/products">Products</ToggleLink>
                        <ToggleLink to="/suppliers">Suppliers</ToggleLink>
                        <ToggleLink to="/info/match">Match</ToggleLink>
                        <ToggleLink to="/info/location">Location</ToggleLink>
                        <ToggleLink to="/info" exact={ true }>All Info</ToggleLink>
                    </div>
                    <div className="col">
                        <CustomPrompt show={ this.state.showPrompt }
                            message={ this.state.message }
                            callback={ this.state.callback } />
                        <Prompt message={ loc =>
                            `Do you want to navigate to ${loc.pathname}?`} />
                        <RouteInfoHOC />
                        <Switch>
                            <Route path="/products" component={ ProductDisplay} />
                            <Route path="/suppliers" component={ SupplierDisplay } />
                            <Route path="/info/:datatype?" component={ RouteInfo } />
                        </Switch>
                    </div>
                </div>
            </div>
        </Router>
    }
}

在上述代码中， getUserConfirmation 属性调用 customGetUserConfirmation 方法，该方法更新用于 CustomPrompt 组件属性的状态数据，从而提示用户进行导航确认。

综上所述，通过使用可选 URL 参数、在其他组件中访问路由数据、编程式导航以及导航前提示用户等技术，我们可以构建出更加灵活和用户友好的 Web 应用导航系统。这些技术能够帮助我们处理各种复杂的导航场景，提升应用的性能和用户体验。

高级 URL 路由深入解析（续）

6. 路由配置的优化与扩展

在实际开发中，随着应用规模的扩大，路由配置可能会变得复杂。为了提高代码的可维护性和可扩展性，我们可以对路由配置进行优化。

6.1 路由配置的模块化

可以将路由配置拆分成多个文件，每个文件负责一部分路由。例如，我们可以创建一个 routes.js 文件来集中管理所有的路由配置：

import React from "react";
import { Route, Switch, Redirect } from "react-router-dom";
import { ProductDisplay } from "./ProductDisplay";
import { SupplierDisplay } from "./SupplierDisplay";
import { RouteInfo } from "./routing/RouteInfo";

const routes = (
  <Switch>
    <Route path="/products" component={ProductDisplay} />
    <Route path="/suppliers" component={SupplierDisplay} />
    <Route path="/info/:datatype?" component={RouteInfo} />
    <Redirect to="/products" />
  </Switch>
);

export default routes;

然后在 Selector 组件中引入并使用这个路由配置：

import React, { Component } from "react";
import { BrowserRouter as Router } from "react-router-dom";
import { ToggleLink } from "./routing/ToggleLink";
import routes from "./routes";

export class Selector extends Component {
  render() {
    return (
      <Router>
        <div className="container-fluid">
          <div className="row">
            <div className="col-2">
              <ToggleLink to="/products">Products</ToggleLink>
              <ToggleLink to="/suppliers">Suppliers</ToggleLink>
              <ToggleLink to="/info/match">Match</ToggleLink>
              <ToggleLink to="/info/location">Location</ToggleLink>
              <ToggleLink to="/info" exact={true}>All Info</ToggleLink>
            </div>
            <div className="col">{routes}</div>
          </div>
        </div>
      </Router>
    );
  }
}

这样做的好处是，当路由配置发生变化时，我们只需要修改 routes.js 文件，而不需要在 Selector 组件中进行大量的修改。

6.2 动态路由配置

在某些情况下，我们可能需要根据不同的条件动态生成路由配置。例如，根据用户的角色来决定显示哪些路由。可以通过以下步骤实现动态路由配置：
1. 定义一个函数，该函数根据条件返回不同的路由配置。

import React from "react";
import { Route, Switch, Redirect } from "react-router-dom";
import { ProductDisplay } from "./ProductDisplay";
import { SupplierDisplay } from "./SupplierDisplay";
import { RouteInfo } from "./routing/RouteInfo";

const generateRoutes = (userRole) => {
  if (userRole === "admin") {
    return (
      <Switch>
        <Route path="/products" component={ProductDisplay} />
        <Route path="/suppliers" component={SupplierDisplay} />
        <Route path="/info/:datatype?" component={RouteInfo} />
        <Route path="/admin" component={AdminDisplay} /> {/* 假设存在 AdminDisplay 组件 */}
        <Redirect to="/products" />
      </Switch>
    );
  } else {
    return (
      <Switch>
        <Route path="/products" component={ProductDisplay} />
        <Route path="/suppliers" component={SupplierDisplay} />
        <Route path="/info/:datatype?" component={RouteInfo} />
        <Redirect to="/products" />
      </Switch>
    );
  }
};

export default generateRoutes;

在组件中调用这个函数并传入相应的条件。

import React, { Component } from "react";
import { BrowserRouter as Router } from "react-router-dom";
import { ToggleLink } from "./routing/ToggleLink";
import generateRoutes from "./generateRoutes";

export class Selector extends Component {
  constructor(props) {
    super(props);
    this.state = {
      userRole: "user" // 假设默认用户角色为 "user"
    };
  }

  render() {
    const routes = generateRoutes(this.state.userRole);
    return (
      <Router>
        <div className="container-fluid">
          <div className="row">
            <div className="col-2">
              <ToggleLink to="/products">Products</ToggleLink>
              <ToggleLink to="/suppliers">Suppliers</ToggleLink>
              <ToggleLink to="/info/match">Match</ToggleLink>
              <ToggleLink to="/info/location">Location</ToggleLink>
              <ToggleLink to="/info" exact={true}>All Info</ToggleLink>
            </div>
            <div className="col">{routes}</div>
          </div>
        </div>
      </Router>
    );
  }
}

7. 路由的性能优化

在大型应用中，路由的性能可能会成为一个问题。以下是一些路由性能优化的方法：

7.1 代码分割

使用 React 的代码分割功能，将不同的路由组件分割成不同的代码块，只有在用户访问相应路由时才加载这些代码块。可以使用 React.lazy 和 Suspense 来实现代码分割：

import React, { lazy, Suspense } from "react";
import { BrowserRouter as Router, Route, Switch, Redirect } from "react-router-dom";
import { ToggleLink } from "./routing/ToggleLink";

const ProductDisplay = lazy(() => import("./ProductDisplay"));
const SupplierDisplay = lazy(() => import("./SupplierDisplay"));
const RouteInfo = lazy(() => import("./routing/RouteInfo"));

export class Selector extends Component {
  render() {
    return (
      <Router>
        <div className="container-fluid">
          <div className="row">
            <div className="col-2">
              <ToggleLink to="/products">Products</ToggleLink>
              <ToggleLink to="/suppliers">Suppliers</ToggleLink>
              <ToggleLink to="/info/match">Match</ToggleLink>
              <ToggleLink to="/info/location">Location</ToggleLink>
              <ToggleLink to="/info" exact={true}>All Info</ToggleLink>
            </div>
            <div className="col">
              <Suspense fallback={<div>Loading...</div>}>
                <Switch>
                  <Route path="/products" component={ProductDisplay} />
                  <Route path="/suppliers" component={SupplierDisplay} />
                  <Route path="/info/:datatype?" component={RouteInfo} />
                  <Redirect to="/products" />
                </Switch>
              </Suspense>
            </div>
          </div>
        </div>
      </Router>
    );
  }
}

在这个例子中， ProductDisplay 、 SupplierDisplay 和 RouteInfo 组件会在用户访问相应路由时才被加载，从而减少了初始加载时间。

7.2 路由匹配优化

合理设计路由路径，避免不必要的路由匹配。例如，将更具体的路由路径放在前面，将通用的路由路径放在后面。这样可以减少路由匹配的时间：

<Switch>
  <Route path="/products/detail/:id" component={ProductDetail} /> {/* 更具体的路由 */}
  <Route path="/products" component={ProductDisplay} /> {/* 通用的路由 */}
  <Route path="/suppliers" component={SupplierDisplay} />
  <Route path="/info/:datatype?" component={RouteInfo} />
  <Redirect to="/products" />
</Switch>

8. 路由的错误处理

在路由过程中，可能会出现各种错误，例如路由未匹配、组件加载失败等。我们需要对这些错误进行处理，以提供更好的用户体验。

8.1 未匹配路由处理

可以使用 Redirect 组件将未匹配的路由重定向到一个默认页面：

<Switch>
  <Route path="/products" component={ProductDisplay} />
  <Route path="/suppliers" component={SupplierDisplay} />
  <Route path="/info/:datatype?" component={RouteInfo} />
  <Route path="/404" component={NotFoundPage} /> {/* 假设存在 NotFoundPage 组件 */}
  <Redirect to="/404" />
</Switch>

当用户访问的路由没有匹配到任何 Route 组件时，会被重定向到 /404 页面。

8.2 组件加载错误处理

在使用代码分割时，可能会出现组件加载失败的情况。可以使用 ErrorBoundary 组件来捕获并处理这些错误：

import React, { Component } from "react";

class ErrorBoundary extends Component {
  constructor(props) {
    super(props);
    this.state = { hasError: false };
  }

  componentDidCatch(error, errorInfo) {
    // 可以在这里记录错误信息
    this.setState({ hasError: true });
  }

  render() {
    if (this.state.hasError) {
      return <div>Something went wrong.</div>;
    }
    return this.props.children;
  }
}

export default ErrorBoundary;

然后在 Suspense 组件中使用 ErrorBoundary 组件：

<ErrorBoundary>
  <Suspense fallback={<div>Loading...</div>}>
    <Switch>
      <Route path="/products" component={ProductDisplay} />
      <Route path="/suppliers" component={SupplierDisplay} />
      <Route path="/info/:datatype?" component={RouteInfo} />
      <Redirect to="/products" />
    </Switch>
  </Suspense>
</ErrorBoundary>

当组件加载失败时， ErrorBoundary 组件会捕获错误并显示错误信息。

9. 总结

高级 URL 路由在现代 Web 应用开发中起着至关重要的作用。通过使用可选 URL 参数、在其他组件中访问路由数据、编程式导航、导航前提示用户、路由配置优化、性能优化和错误处理等技术，我们可以构建出更加灵活、高效、用户友好的 Web 应用导航系统。

在实际开发中，需要根据应用的具体需求和场景选择合适的路由技术和优化方法。同时，不断学习和掌握新的路由技术，能够帮助我们更好地应对各种复杂的开发需求，提升应用的质量和用户体验。

以下是一个简单的路由处理流程图，展示了从用户访问 URL 到最终显示页面的过程：

graph LR
    A[用户访问 URL] --> B{路由匹配}
    B -->|匹配成功| C[加载相应组件]
    C --> D[显示页面]
    B -->|匹配失败| E[重定向到 404 页面]
    E --> D

希望本文能够帮助你更好地理解和应用高级 URL 路由技术，在开发中构建出更加出色的 Web 应用。