More hooks and routing
useContext, useRef, custom hooks and React Router.
| Hook | Use it for |
|---|---|
useContext | Sharing data such as the signed-in user without passing props through every level |
useRef | Holding a value that does not redraw the page, or pointing to an element |
useMemo | Keeping the result of a slow calculation |
Custom hook | A use... function that shares logic between components |
Pages with React Router
React (JSX)
import { BrowserRouter, Link, Route, Routes } from "react-router-dom";
export default function App() {
return (
<BrowserRouter>
<nav><Link to="/">Home</Link> <Link to="/jobs">Jobs</Link></nav>
<Routes>
<Route path="/" element={<Home />} />
<Route path="/jobs" element={<Jobs />} />
</Routes>
</BrowserRouter>
);
}