使用 React Router DOM 进行页面路由

React Router 是 React 生态系统中流行的路由解决方案之一，它可以跟踪应用程序的当前位置，并以 UI 友好的方式渲染出页面。其中，React Router DOM 是 React Router 的 Web 版本，包含了基础路由、导航和组件等功能。

安装

React Router DOM 通过 NPM 包管理器进行安装：

npm install react-router-dom

路由组件

React Router DOM 基于组件的编程风格，其中包含了许多可重用的组件，用于帮助你构建路由和导航。

BrowserRouter

BrowserRouter 是一个包装器组件，用于将主体应用程序与路由组件包装在一起。在您的应用程序中只需要使用它一次，并将所有路由包裹在其中。

import { BrowserRouter } from 'react-router-dom';

ReactDOM.render(
  <BrowserRouter>
    <App />
  </BrowserRouter>,
  document.getElementById('root')
);

Route

Route 组件用于指定访问 URL 时需要呈现的内容。Route 至少需要两个属性：path 和 component。

import { Route } from 'react-router-dom';

function App() {
  return (
    <div>
      <Route path="/" component={Home} />
      <Route path="/about" component={About} />
    </div>
  );
}

path 属性指定您希望呈现组件的 URL，component 属性指定要呈现的组件。

Link

Link 组件用于创建导航链接。它会监视点击并阻止浏览器的默认行为，并通过调用 history.push() 将用户带到目标 URL。

import { Link } from 'react-router-dom';

function Navigation() {
  return (
    <nav>
      <ul>
        <li><Link to="/">Home</Link></li>
        <li><Link to="/about">About</Link></li>
      </ul>
    </nav>
  );
}

to 属性指定链接的目标 URL。

Switch

Switch 组件用于只呈现与当前 URL 匹配的第一个 Route。

import { Route, Switch } from 'react-router-dom';

function App() {
  return (
    <div>
      <Navigation />
      <Switch>
        <Route exact path="/" component={Home} />
        <Route path="/about" component={About} />
        <Route component={NotFound} />
      </Switch>
    </div>
  );
}

路由参数

React Router DOM 允许您在 URL 中使用参数，这样您就可以构建动态路径。

带参数的路由

创建带参数的路由非常简单，您只需要在 URL 上使用 :parameter，例如：

<Route path="/user/:username" component={UserPage} />

在 UserPage 组件中，您可以通过 this.props.match.params.username 访问路由参数。

可选参数路由

如果您需要创建一个可选参数的路由，则可以使用 ? 操作符，例如：

<Route path="/product/:productId?" component={ProductPage} />

这将创建一个可选的 productId 参数，它可以出现在 URL 中也可以不出现。

总结

React Router DOM 是 React 生态系统中最流行的 Web 路由解决方案之一，它提供了许多方便的组件和功能，用于构建复杂的单页应用程序。在您的项目中使用 React Router DOM 可以使您更高效地开发出优秀的用户交互体验。