close

Форматирование URL и Routing в React — руководство по использованию React Router

В приложении React форматирование URL и routing играют решающую роль в навигации по страницам и отображении соответствующего контента. Для управления routing в React мы можем использовать библиотеку. Вот базовое руководство о том, как использовать для форматирования URL-адресов и обработки в вашем приложении React. 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 с

Используйте компонент для создания навигации в вашем приложении. <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