React Router Dom Boilerplate – codeburst

Intro to React Router Dom V4.2.2

☞ 

#Reactjs #javascript

  • First we install new app using create-react-app – npm install -g introRouter – cd introRouter – npm start //to start appNow we want to install the react-router-dom – npm i –save react-router-dom Now create a router folder in src directory – In router folder create new file with name router.js…
  • /components/Posts”;import Header from “.
  • /header”;const ReactRouter =()={return (React.FragmentHeader /Route exact path=”/” component={App} /Route path=”/posts” component={Posts} //React.Fragment);}export default ReactRouter;we added exact it tells to load only these component – Now create components folder in src directory/folderDelete App.js file in your src folder – Add new App.js in the Components Folder – Add below code in…
  • we are importing Navlink from react-router-dom – to create link tags – import React, { Component } from “react”;import { NavLink } from “react-router-dom”;class Header extends Component {active = {fontWeight: “bold”,color: “red”};header = {display: “flex”,justifyContent: “space-evenly”,listStyle: “none”};render() {return (div style={this.header}NavLink exact to=”/” to=”/posts” default Header;Above Header component we already included…
  • /index.css’;import {BrowserRouter as Router} from ‘react-router-dom’;import ReactRouter from makes our index.js very less code and no confusion – We already separated router.js and header.js – Thanks for consuming your valuable time i hope you love these – Github repository for code

First we install new app using create-react-app. “React Router Dom Boilerplate” is published by Sai gowtham in codeburst

First we install new app using create-react-app

npm install -g create-react-app

create-react-app introRouter

cd introRouter

npm start //to start app

Now we want to install the react-router-dom

npm i –save react-router-dom

Now create a router folder in src directory

In router folder create new file with name router.js

add the below code in router.js file just we created

We only import Route Component from react-router-dom to create routes for our App

import React from “react”;

import { Route } from “react-router-dom”;

import App from “../components/App”;

import Posts from “../components/Posts”;

import Header from “../header”;

const ReactRouter =()=>{

return (

export default ReactRouter;

we added exact it tells to load only these component

Now create components folder in src directory/folder

Delete App.js file in your src folder

Add new App.js in the Components Folder

Add below code in your App.js file

import React, { Component } from “react”;

class App extends Component {

render() {

return (

App is there

React Router Dom Boilerplate – codeburst