Вложенные маршруты и параметры в React

Вложенные маршруты и параметры в React Router позволяют вам создавать более сложные навигационные сценарии, включая вложенные компоненты и передачу параметров в URL. Вот как работать с этими возможностями:

Вложенные маршруты:

Вложенные маршруты позволяют вам встраивать одни компоненты внутри других, формируя иерархию.

// App.js
import React from 'react';
import { Route, Link } from 'react-router-dom';
import Home from './Home';
import About from './About';
import Contact from './Contact';

const App = () => (
  <div>
    <nav>
      <ul>
        <li>
          <Link to="/">Home</Link>
        </li>
        <li>
          <Link to="/about">About</Link>
        </li>
        <li>
          <Link to="/contact">Contact</Link>
        </li>
      </ul>
    </nav>

    <hr />

    <Route exact path="/" component={Home} />
    <Route path="/about" component={About} />
    <Route path="/contact" component={Contact} />
  </div>
);

export default App;

В этом примере Contact компонент является вложенным маршрутом, и он будет отображаться, когда URL соответствует /contact.

Передача и чтение параметров маршрута:

Вы можете передавать параметры в URL и читать их в компонентах.

// App.js
import React from 'react';
import { Route, Link } from 'react-router-dom';
import User from './User';

const App = () => (
  <div>
    <nav>
      <ul>
        <li>
          <Link to="/user/123">User 123</Link>
        </li>
        <li>
          <Link to="/user/456">User 456</Link>
        </li>
      </ul>
    </nav>

    <hr />

    <Route path="/user/:id" component={User} />
  </div>
);

export default App;

// User.js
import React from 'react';
import { useParams } from 'react-router-dom';

const User = () => {
  const { id } = useParams();

  return <p>User ID: {id}</p>;
};

export default User;

В этом примере :id в URL представляет параметр, который будет доступен через useParams() хук в компоненте User.

Таким образом, вложенные маршруты и параметры в React Router позволяют вам создавать более сложные и гибкие сценарии навигации в вашем приложении.