在 React 应用程序中,URL 格式化 routing 在导航页面和显示相应内容方面发挥着至关重要的作用。 为了 routing 在 React 中进行管理,我们可以使用该 库。 以下是有关如何在 React 应用程序中 设置 URL 格式和句柄的 基本指南。 React Router React Router routing
安装 React Router
在终端中打开项目目录并运行以下命令进行安装 : React Router npm install react-router-dom
将必要的组件导入 到您的 React 组件中。 React Router
定义路线
使用该 组件来包装您的 React 应用程序并设置基本 URL 格式。 <BrowserRouter>
使用该 <Route>
组件来定义应用程序中的路由。
例子:
定义 Link s
使用该 组件在您的应用程序中创建导航 。 <Link>
link
例子:
访问路径参数
使用 <Route>
具有 path
格式属性的组件 /users/:id
来访问路径参数。
在 定义的组件内 <Route>
,您可以使用 useParams()
来访问路径参数的值。
例子:
使用 Switch 和 Redirect
使用该 组件仅渲染与路径匹配的第一个路由。 <Switch>
使用该 组件可以让 用户从一个指定路径转到另一路径。 <Redirect>
redirect
例子:
这些是 URL 格式化以及 routing 在 React 中使用. 通过利用 ,您可以创建灵活的 React 应用程序,能够根据 URL 导航和显示各种内容。 React Router React Router