Разница между location.pathname и match.url в react-router-dom?
В чем разница между props.location.pathname и props.match.url
в react-router-dom?
Из их ДОКУМЕНТОВ: https://reacttraining.com/react-router/web/api/location
match.url
(string) The matched portion of the URL. Useful for building nested
<Link>slocation
A location object to be used for matching children elements instead of the current history location (usually the current browser URL).
До сих пор я видел их только с одинаковыми значениями.
Пример:
Если мой маршрут соответствует этому URL-адресу:
/search/searchValue?category=whatever
И я хочу удалить строки запроса и перейти к:
/search/searchValue
Должен ли я использовать один над другим, или они оба будут работать?
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
location.pathname представляет URL относительно корня.
match.url представляет совпадающая часть URL, так что, возможно, часть location.pathname.
Учитывая эти два компонента:
function Home({match, location}) {
return (
<div>
{match.url}
<br/>
{location.pathname}
</div>
);
}
function App() {
return (
<Router>
<Route path = "/" component = {Home}/>
</Router>
);
}
Если вы идете в /something, то
- match.url будет / (поскольку совпадающая часть URL — это
/) - location.pathname будет /что-то (относительный корневой URL)
Вот пример на stackblitz.
В вашем примере это зависит от того, соответствует ли ваш маршрут точному пути или нет (https://reacttraining.com/react-router/web/api/Route/exact-bool).
Если это не так (и вы хотите получить только /search/searchValue), вам следует использовать match.url, потому что location.pathname может быть больше, чем /search/searchValue -> /search/searchValue/something.