Skip to content

Latest commit

 

History

History
129 lines (90 loc) · 5.24 KB

learn-react-router-dom.md

File metadata and controls

129 lines (90 loc) · 5.24 KB
Raw

Learn react-router-dom

We can assign type for useParams ❤️❤️

type Tab = {
  value: 'episodes' | 'posts' | 'edit',
  label: string,
};
type ParamsType = { podcastId: string, tabKey: Tab['value'] };
const { podcastId, tabKey } = useParams<ParamsType>(); // NOTE: We assigned type here

You can not 😔 define types for useSearchParams and searchParams.get

// INCORRECT WAY: Because types not allowed for `useSearchParams` and `searchParams.get` at all:
const [searchParams] = useSearchParams<anyTypeHere1>(); // NOTE: anyTypeHere1 will throw typescript error i.e, `expected 0 argument but got 1`
const view = searchParams.get<anyTypeHere2>('view') as ViewSearchParam; // NOTE: anyTypeHere2 will throw typescript error i.e, `expected 0 argument but got 1`

// CORRECT WAY TO SET TYPES FOR `searchParams`:
type ViewSearchParam = 'self' | 'edit' | null;
const [searchParams] = useSearchParams();
const view = searchParams.get<anyTypeHere2>('view') as ViewSearchParam; // NOTE: We assigned type here

react-router-dom docs links

  • Migrating from v5 to v6 in react-router-dom: Click here

set brand new search params

let newSearcParams = {}
for (const [k,v] of searchParams) { // here `searchParams` is the value we get from `useSearchParams` hook of react-router@v6
  newSearcParams[k] = v
  // here we put some condition and change any particular key/value pari as per our need
}
setSearchParams(newSearcParams) // react-router@v6 hook to set new search params

react-router-dom@6 useSearchParams

Video: Click here, Docs: Click here

react-router-dom v5, what does replace=true prop does?

Source: Docs @ MDN, react-router-dom v5 Docs

It replaces the current page in history to desired page so it will provide experience like: Page1 > Page2 (using replace=true to navigate to page3) > Page3. Now if you press back button in browser then you get back to Page1 instead of Page2 becoz you replaced history object.

image

Learn Nested Routing, react-router-dom v6

  1. index.tsx
<BrowserRouter>
	<App />
</BrowserRouter>
  1. app.tsx
const topLevelRedirectPath = '/home'; // TODO: Base this on whether or not user is signed in

<Routes>
	{/* Top level redirect */}
	<Route path="/" element={<Navigate to={topLevelRedirectPath} replace />} />

	{/* Unauthenticated routes */}
	<Route path="/sign-in" element={<SignIn />} />
	<Route path="/onboarding/*" element={<Onboarding />} />
	
	{/* Authenticated routes */}
	<Route path="/home" element={<Home />} />
	<Route path="/dating/*" element={<Dating />} />
</Routes>
  1. Dating.tsx (Last Route of "Authenticated routes")

Point: - component provides a layout to the content of page component in last Route.

<Routes>
	<Route path="/" element={<Navigate to="setup" replace />} />
	<Route path="/welcome" element={<DatingWelcome />} />
	<Route path="/setup/*" element={<DatingSetup />} />
	<Route path="*" element={<UnauthenticatedPageWrapper><NotFound /></UnauthenticatedPageWrapper>} />
</Routes>

react-router-dom v6

Component has no component and render as we had in react-router-dom@5 as you can see the type Route object type here: Click here.

Learn render vs. component props in <Route /> component react-router-dom

My awesome codesandbox Link: Click here

tldr:

Snippet from above codesandbox link, the component Users is not going to unmount when we are changing the count state (using render) but About component does unmount on each count state change thus creating unnecessary unmouns (using component). ALSO: Both render and component way of using pass updated props successfully to them on count state change.

<Switch>
        <Route path="/about" component={() => <About count={count} />} />
        <Route
          path="/users"
          render={(routeProps) => <Users {...routeProps} count={count} />}
        />
</Switch>

Amazing Explanation of react-router v6.4

Best explanation of this router(beats the official docs video as well): Click here