Для достижения точного совпадения маршрута вместе с NavLink в React, но при этом игнорирования параметров GET, можно использовать свойство exact
, вместе с использованием <Route>
компоненты из react-router
.
exact
свойство определяет, должен ли маршрут полностью соответствовать местоположению URL для его активации. По умолчанию exact
равно false
, что означает, что маршрут будет считаться активным, если его путь будет частично соответствовать текущему URL.
Чтобы достичь точного совпадения маршрута с игнорированием параметров GET, нужно установить exact
в значение true
.
Вот пример использования:
import { NavLink, Route } from 'react-router-dom'; const App = () => { return ( <div> <NavLink to="/example?param=value" activeClassName="active" exact> Example </NavLink> <Route path="/example" exact> <ExampleComponent /> </Route> </div> ); };
В этом примере, когда пользователь переходит по /example?param=value
, ссылка активируется, так как она имеет атрибут activeClassName
. Однако, при использовании exact
, компонент ExampleComponent
будет отображаться, только когда путь URL точно соответствует /example
. Параметры GET (?param=value
) игнорируются при определении активности маршрута.
Если вам нужно сообщить компоненту о параметрах GET, но при этом игнорировать их для сопоставления маршрута, можно использовать хуки useLocation()
из библиотеки react-router-dom
. Например:
import { NavLink, Route, useLocation } from 'react-router-dom'; const App = () => { const location = useLocation(); return ( <div> <NavLink to="/example?param=value" activeClassName="active" exact> Example </NavLink> <Route path="/example" exact> <ExampleComponent location={location} /> </Route> </div> ); }; const ExampleComponent = ({ location }) => { // Используйте объект location для доступа к параметрам GET const params = new URLSearchParams(location.search); return ( <div> <h1>Params: {params.get('param')}</h1> </div> ); };
В этом примере, компонент ExampleComponent
получает объект location
с помощью useLocation()
. Вы можете использовать объект location
для доступа к параметрам GET с помощью URLSearchParams
.