URL 格式和 Routing React- 使用指南 React Router

在 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> 组件来定义应用程序中的路由。

例子：

import { BrowserRouter, Route } from 'react-router-dom';  
  
function App() {  
  return( 
    <BrowserRouter>  
      <Route exact path="/" component={Home} />  
      <Route path="/about" component={About} />  
      <Route path="/products" component={Products} />  
    </BrowserRouter>  
 );  
}  

 

定义 Link s

使用该 组件在您的应用程序中创建导航 。 <Link> link

例子：

import { Link } from 'react-router-dom';  
  
function Navigation() {  
  return( 
    <nav>  
      <ul>  
        <li>  
          <Link to="/">Home</Link>  
        </li>  
        <li>  
          <Link to="/about">About</Link>  
        </li>  
        <li>  
          <Link to="/products">Products</Link>  
        </li>  
      </ul>  
    </nav>  
 );  
}  

 

访问路径参数

使用 <Route> 具有 path 格式属性的组件 /users/:id 来访问路径参数。

在 定义的组件内 <Route>，您可以使用 useParams() 来访问路径参数的值。

例子：

import { useParams } from 'react-router-dom';  
  
function User() {  
  const { id } = useParams();  
  
  return <div>User ID: {id}</div>;  
}  

 

使用 Switch 和 Redirect

使用该 组件仅渲染与路径匹配的第一个路由。 <Switch>

使用该 组件可以让 用户从一个指定路径转到另一路径。 <Redirect> redirect

例子：

import { Switch, Route, Redirect } from 'react-router-dom';  
  
function App() {  
  return( 
    <BrowserRouter>  
      <Switch>  
        <Route exact path="/" component={Home} />  
        <Route path="/about" component={About} />  
        <Route path="/products" component={Products} />  
        <Redirect to="/" />  
      </Switch>  
    </BrowserRouter>  
 );  
}  

 

这些是 URL 格式化以及 routing 在 React 中使用. 通过利用 ，您可以创建灵活的 React 应用程序，能够根据 URL 导航和显示各种内容。 React Router React Router