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

🍄 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>
<App />
</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 (
<BrowserRouter>
<Switch>
<Route
exact={true}
path={routes.SIGN_IN}
component={SignIn}
/>
<Route exact={true} path={routes.HOME} component={Home} />
<Route
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!!