Application using react-router-dom

lets do hands-on with Router

Lets build this application with react-router-dom

Our root container using hashRouter

import React from 'react';
import { render } from 'react-dom';
//------------------dashboard-------------------//
import MainComponent from './components/main';

import {HashRouter } from 'react-router-dom'
render(
		<HashRouter>
		   	<div className="container">
			      	<MainComponent />
				</div>
		</HashRouter>
, document.getElementById("app"));

Routing for Root components can be added in our main component, our main component will look like

import { Route, NavLink } from 'react-router-dom';
const MainComponent = (props) => {
    return (<div>
        <nav className="row space-between">
            <ul className="row nav">
                <li><NavLink activeClassName="active" className="nav-link" to="/overview">Overview</NavLink></li>
                <li><NavLink activeClassName="active" className="nav-link" to="/battle" aria-current="page" href="/battle" >Battle</NavLink></li>
            </ul>
        </nav>
        <Route exact path="/" component={GithubOverviewPage} />
        <Route path="/overview" component={GithubOverviewPage} />
        <Route path="/battle" component={BattelPageComponent} />
        <Route exact path="/compare" component={GithubBattlePage} />
        </div>
        )
}

Nexted Routes where we are passing route param as technology name

import React from "react";
import { Route, NavLink, Switch } from 'react-router-dom'
import OverviewTechnologyComponent from '../overview/pages/OverviewTechnologyComponent';

class OverviewPageComponent extends React.Component {

  render(){
  return (
    <div>
    <ul className="flex-center">
        <li><NavLink activeClassName="active" to="/overview/all" className="btn-clear nav-link"> All </NavLink>
        </li><li><NavLink activeClassName="active" to="/overview/js" className="btn-clear nav-link ">JavaScript</NavLink>
        </li><li><NavLink activeClassName="active" to="/overview/ruby" className="btn-clear nav-link ">Ruby</NavLink>
        </li><li><NavLink  activeClassName="active" to="/overview/java" className="btn-clear nav-link ">Java</NavLink>
        </li><li><NavLink activeClassName="active" to="/overview/css" className="btn-clear nav-link ">CSS</NavLink></li>
        <li><NavLink activeClassName="active"   to="/overview/python" className="btn-clear nav-link ">Python</NavLink></li>
      </ul>
      <Switch>
        <Route exact path="/" component={OverviewTechnologyComponent} />
        <Route path="/overview/:name" component={OverviewTechnologyComponent} />
      </Switch>
    </div>)
  }
}
export default OverviewPageComponent;