React-Router with Redux

react-router is a collection of navigational components that compose declaratively with our React App.
In this article, I would like to describe how to use react-router with Redux.

🎉 Tutorial

• https://medium.com/@pshrmn/a-simple-react-router-v4-tutorial-7f23ff27adf
  • The tutorial shows how to build a single-page application website.
• https://reacttraining.com/react-router/web/guides/philosophy
  • This is a traning material for react-router.

🚕 Installation

yarn add react-router-dom

# For only TypeScript
yarn add --dev @types/react-router @types/react-router-dom

🎂 Router

import { BrowserRouter } from 'react-router-dom'

ReactDOM.render((
  
    
  </BrowserRouter>
), document.getElementById('root'))

🐠 Create Routing

import * as React from "react";
import { BrowserRouter, Route, Switch } from "react-router-dom";
import * as routes from "../../constants/routes";
import { Home } from "../Home";
import { Articles } from "../Articles";
import { SignIn } from "../SignIn";

export class App extends React.Component {
  constructor(props: any) {
    super(props);
  }

  public render() {
    return (
      
        
                      exact={true}            path={routes.SIGN_IN}            component={SignIn}          />          true} path={routes.HOME} component={Home} />
            exact={true}
            path={routes.SIGN_IN}
            component={SignIn}
          />
          true
                      exact={true}            path={routes.ARTICLES}            component={Articles}          />        </Switch>      BrowserRouter>    );  }}
            exact={true}
            path={routes.ARTICLES}
            component={Articles}
          />
        </Switch>
      BrowserRouter>    );  }}
    );
  }
}

🏀 With Redux

import { withRouter } from 'react-router-dom'

export default withRouter(connect(mapStateToProps)(Something))

🖥 Recommended VPS Service

VULTR provides high performance cloud compute environment for you. Vultr has 15 data-centers strategically placed around the globe, you can use a VPS with 512 MB memory for just $ 2.5 / month ($ 0.004 / hour). In addition, Vultr is up to 4 times faster than the competition, so please check it => Check Benchmark Results!!