From d79e56288aca371db9c595bc78e0d2810e118083 Mon Sep 17 00:00:00 2001 From: Hitvardhan Singh Solanki Date: Fri, 2 Nov 2018 13:15:31 +0530 Subject: [PATCH] Redux with react router (#34143) --- guide/english/react/react-router/index.md | 26 ++++++++++++++++++++--- 1 file changed, 23 insertions(+), 3 deletions(-) diff --git a/guide/english/react/react-router/index.md b/guide/english/react/react-router/index.md index fcbea1ed7b..f3e875c552 100644 --- a/guide/english/react/react-router/index.md +++ b/guide/english/react/react-router/index.md @@ -1,9 +1,10 @@ --- title: React Router --- + # React Router for beginners -# Installation +## Installation React Router has been broken into three packages: `react-router`, `react-router-dom`, and `react-router-native`. You should almost never have to install react-router directly. That package provides the core routing components and functions for React Router applications. The other two provide environment specific (browser and react-native) components, but they both also re-export all of react-router's exports. @@ -12,14 +13,14 @@ We are building a website (something that will be run in browsers), so we will i `npm install --save react-router-dom` -# The Router +## The Router When starting a new project, you need to determine which type of router to use. For browser based projects, there are and components. The `` should be used when you have a server that will handle dynamic requests (knows how to respond to any possible URI), while the should be used for static websites (where the server can only respond to requests for files that it knows about). Usually it is preferable to use a ``, but if your website will be hosted on a server that only serves static files, then the `` is a good solution. For our project, we will assume that the website will be backed by a dynamic server, so our router component of choice is the ``. -# Import Statement +## Import Statement ```javascript @@ -45,3 +46,22 @@ const Nav = () => ( ) ``` +## React Router with redux + +The main thing that many developers face is how to integrate react router with redux to pass down both the store as well as the props from the browser router to enhance the functionality of the component. + +A basic example is as follows: + +```jsx + const Root = ({store}) => ( + + + + {/* Making a router in the main App.js file will facilitate the passing of props from the Provider and the Router */} + + +) +``` + +### Resources +* [Redux-with-react Router](https://redux.js.org/advanced/usagewithreactrouter)