From 3a1533a8234b662e232d06fe0c636bf7a4f6c3ea Mon Sep 17 00:00:00 2001 From: Benji Date: Mon, 10 Jun 2024 09:21:14 +0000 Subject: [PATCH] Update Question 83 to React Router V6 README.md Update of Question 83 TOC & Answer to React Router V6 README.md --- README.md | 118 +++++++++++++++++++++++++++--------------------------- 1 file changed, 59 insertions(+), 59 deletions(-) diff --git a/README.md b/README.md index 1790e0cd..2e9b33b5 100644 --- a/README.md +++ b/README.md @@ -121,9 +121,9 @@ Hide/Show table of contents | | **React Router** | | 79 | [What is React Router?](#what-is-react-router) | | 80 | [How React Router is different from history library?](#how-react-router-is-different-from-history-library) | -| 81 | [What are the \ components of React Router v6?](#what-are-the-router-components-of-react-router-v6) | +| 81 | [What are the \ components of React Router v4?](#what-are-the-router-components-of-react-router-v4) | | 82 | [What is the purpose of push and replace methods of history?](#what-is-the-purpose-of-push-and-replace-methods-of-history) | -| 83 | [How do you programmatically navigate using React router v4?](#how-do-you-programmatically-navigate-using-react-router-v4) | +| 83 | [How do you programmatically navigate using React router v6?](#how-do-you-programmatically-navigate-using-react-router-v6) | | 84 | [How to get query parameters in React Router v4](#how-to-get-query-parameters-in-react-router-v4) | | 85 | [Why you get "Router may have only one child element" warning?](#why-you-get-router-may-have-only-one-child-element-warning) | | 86 | [How to pass params to history.push method in React Router v4?](#how-to-pass-params-to-historypush-method-in-react-router-v4) | @@ -2316,16 +2316,15 @@ Hide/Show table of contents **[⬆ Back to Top](#table-of-contents)** -81. ### What are the `` components of React Router v6? +81. ### What are the `` components of React Router v4? - React Router v6 provides below 4 `` components: + React Router v4 provides below 3 `` components: - 1. ``:Uses the HTML5 history API for standard web apps. - 2. ``:Uses hash-based routing for static servers. - 3. ``:Uses in-memory routing for testing and non-browser environments. - 4. ``:Provides static routing for server-side rendering (SSR). + 1. `` + 2. `` + 3. `` - The above components will create _browser_, _hash_, _memory_ and _static_ history instances. React Router v6 makes the properties and methods of the `history` instance associated with your router available through the context in the `router` object. + The above components will create _browser_, _hash_, and _memory_ history instances. React Router v4 makes the properties and methods of the `history` instance associated with your router available through the context in the `router` object. **[⬆ Back to Top](#table-of-contents)** @@ -2340,73 +2339,74 @@ Hide/Show table of contents **[⬆ Back to Top](#table-of-contents)** -83. ### How do you programmatically navigate using React Router v4? +83. ### How do you programmatically navigate using React Router v6? - There are three different ways to achieve programmatic routing/navigation within components. + In React Router v6, you can achieve programmatic routing/navigation within components using the following methods: - 1. **Using the `withRouter()` higher-order function:** + 1. **Using the `useNavigate` Hook:** - The `withRouter()` higher-order function will inject the history object as a prop of the component. This object provides `push()` and `replace()` methods to avoid the usage of context. + The `useNavigate` hook provides a function to navigate programmatically within functional components ```jsx harmony - import { withRouter } from "react-router-dom"; // this also works with 'react-router-native' - - const Button = withRouter(({ history }) => ( - - )); + import { useNavigate } from 'react-router-dom'; + const Button = () => { + const navigate = useNavigate(); + return ( + + ); + }; ``` - 2. **Using `` component and render props pattern:** + 2. **Using the `` Component:** - The `` component passes the same props as `withRouter()`, so you will be able to access the history methods through the history prop. + The `` component allows you to navigate programmatically within JSX code. ```jsx harmony - import { Route } from "react-router-dom"; + import { Navigate } from 'react-router-dom'; + +const Button = () => ( + +); - const Button = () => ( - ( - - )} - /> - ); ``` - 3. **Using context:** + 3. **Using the `useParams` Hook:** - This option is not recommended and treated as unstable API. + If you're navigating based on URL parameters, you can use the `useParams` hook to access the parameters and navigate accordingly. ```jsx harmony - const Button = (props, context) => ( - - ); + import { useParams, useNavigate } from 'react-router-dom'; + +const Button = () => { + const params = useParams(); + const navigate = useNavigate(); + + return ( + + ); +}; - Button.contextTypes = { - history: React.PropTypes.shape({ - push: React.PropTypes.func.isRequired, - }), - }; ``` **[⬆ Back to Top](#table-of-contents)**