Навигация с React Router DOM v6

Способы навигации с использованием react-router-dom v6

Link

Link является якорным тегом и используется для управления навигацией. Для демонстрации см. код ниже.

import { Link } from 'react-router-dom';
...
...
<Link to="/about">About</Link>

NavLink

Та же функциональность, что Link и у NavLink, но она также позволяет нам отображать ссылку как ту, которую пользователь в данный момент просматривает.

import { NavLink } from 'react-router-dom';
...
...
<NavLink className={({ isActive }) => isActive ? 'active' : ''} to="/about">About</NavLink>

Navigate компонент

Вы можете использовать <Navigate /> компонент для управления перенаправлением и использовать replace атрибут для перезаписи текущего местоположения в стеке истории.

import { BrowserRouter, Navigate, Route, Routes } from 'react-router-dom';
...
...
<BrowserRouter>
  <Routes>
    <Route path="/" element={<Home />} />
    <Route path="/about" element={<About />} />
    <Route
        path="*"
        element={<Navigate to="/" replace />}
    />
  </Routes>
</BrowserRouter>

Программная навигация

Если вы хотите программно осуществлять навигацию с одной страницы на другую, то вам следует использовать useNavigate. Другими словами, можно сказать, что если вы хотите управлять перенаправлением при нажатии кнопки, то вы можете использовать его.

import { useNavigate } from "react-router-dom";
 
export default function Login() {
  let navigate = useNavigate();
 
  return (
    <button
      onClick={() => navigate("/dashboard")}
    >
      Login
    </button>
  );
}

Заменить текущее местоположение

Используйте replace атрибут для перезаписи местоположения в стеке истории.

navigate('/dashboard', { replace: true });

Передать значение другому компоненту

Чтобы передать значение другому компоненту с помощью useNavigate().

navigate("/dashboard", { state: { id: 1, data: {...} } });

Теперь используйте useLocation() для считывания значения состояния.

import { useLocation } from "react-router-dom";
...
...
let location = useLocation();
console.log('Id: ', location.state.id);
console.log('Data: ', location.state.data);

Надеемся, эта статья окажется для вас полезной. Спасибо за прочтение. Удачного кодирования.