React Router 是一个基于 React 的路由库，用于构建单页应用（SPA）。其中，动态路由允许我们根据传入的参数渲染不同的组件。

动态路由基本用法

动态路由通常包含动态部分，例如 /user/:id，其中 :id 是动态部分。

  • 创建路由组件：首先，我们需要创建一个路由组件，该组件将渲染当用户访问特定路由时。
  • 配置路由：在 React Router 中，我们使用 <Route> 组件来配置路由。
  • 匹配动态路由：在 <Route> 组件中，我们可以使用 path 属性来匹配动态路由。

示例

以下是一个简单的动态路由示例：

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

const User = ({ match }) => {
  return (
    <div>
      <h2>User {match.params.id}</h2>
    </div>
  );
};

const App = () => (
  <Switch>
    <Route path="/user/:id" component={User} />
    {/* 其他路由配置 */}
  </Switch>
);

在这个例子中，当用户访问 /user/123 时，User 组件会被渲染，并且 match.params.id 将是 123。

高级动态路由

除了基本的动态路由，React Router 还支持更高级的动态路由功能，例如：

  • 动态路由嵌套
  • 路由参数验证
  • 路由参数重命名

动态路由嵌套

在动态路由嵌套中，我们可以将一个动态路由作为另一个路由的子路由。

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

const UserProfile = ({ match }) => {
  return <h3>User Profile: {match.params.id}</h3>;
};

const User = ({ match }) => (
  <div>
    <h2>User {match.params.id}</h2>
    <Switch>
      <Route path={match.path + "/profile"} component={UserProfile} />
      {/* 其他子路由 */}
    </Switch>
  </div>
);

const App = () => (
  <Switch>
    <Route path="/user/:id" component={User} />
    {/* 其他路由配置 */}
  </Switch>
);

在这个例子中，当用户访问 /user/123/profile 时，UserProfile 组件会被渲染。

图片展示

  • React Router

更多信息，请访问React Router 官方文档。

[React Router 官方文档](/react_tutorial/react_router_doc)