Idag kollade vi på React Router v5.2 och de möjligheter den ger oss. Bland annat så kan vi med hjälp av fyra stycken Router-hooks använda funktions-komponenter och ändå hämta ut route-parametrar och interagera med både history och location-objekten.
(Hooks fanns i React Router v5.1 som vi använde i JavaScript 1-kursen men vi blandade inte in hooks då för kursen var redan fullproppad).
Vi kollade även på några nyheter som t.ex. att skicka våra komponenter som barn till <Route>, och hur man kan använda sig av <Route> i flera olika komponenter och därmed få nästlade routes.
Som övning för eftermiddagen och morgondagen så fick ni i uppgift att lösa två problem vi har i vår HackerNews-app, se nedan om workshopen för info.
Artiklar
The Hooks of React Router
https://css-tricks.com/the-hooks-of-react-router/
React Router: Hooks
https://reactrouter.com/web/api/Hooks
useHistory
https://reactrouter.com/web/api/Hooks/usehistory
useLocation
https://reactrouter.com/web/api/Hooks/uselocation
useParams
https://reactrouter.com/web/api/Hooks/useparams
useRouteMatch
https://reactrouter.com/web/api/Hooks/useroutematch
React Router: Nesting
https://reactrouter.com/web/example/nesting
Workshop
Vi har två problem i vår app som jag vill att ni försöker lösa:
Steg 1
1.1. Lös så att HackerNewsArticle använder den article vi skickar med som location.state (ifall den finns!).
1.2. Lös så att man kan ladda om sidan när man är inne på en artikel (och inte har en artikel skickad till sig i state utan bara id:t som route-parameter). Dvs trigga en hämtning av artikeln från HN API med hjälp av articleId i route-parametern.
Steg 2
Spara söksträngen (på något sätt) så när man backar tillbaka till sökresultatet från en artikel så är söksträngen sparad och sökningen görs på nytt.
Exempel på om man sparar söksträngen i location.search:
/search?q=tesla /search?q=react /search?q=spacex /search?q=memes
Steg 3 (extra)
Första-sidan är tom, visa artiklar från HN API’s ”Front Page” (hämta från endpoint:en http://hn.algolia.com/api/v1/search?tags=front_page).
Lycka till 💪🏻!