React Router Dom V4 || Sample React Programs

React Router v6 

Get React Router v6

Run the following command to get React Router v6

npm install react-router@6 react-router-dom@6

......................................................................................................................................................................................................................................
Bundle Size
One of the great improvements over previous versions is the bundle size. It has been reduced by almost 70% from the previous version.

......................................................................................................................................................................................................................................
import React from "react";
import {
  BrowserRouter as Router,
  Routes,
  Route,
  Link,
  Outlet,
  useParams
} from "react-router-dom";

export default function App() {
  return (
    <Router>
      <nav>
        <Link to="/">Home</Link>
        <Link to="/launch">Launch</Link>
      </nav>

      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="launch" element={<Launch />}>
          <Route path="/" element={<LaunchIndex />} />
          <Route path=":slug" element={<LaunchShoe />} />
        </Route>
        <Route path="*" element={<NotFound />} />
      </Routes>
    </Router>
  );
}

function NotFound() {
  return (
    <div>
      <h1>Not found!</h1>
      <p>Sorry your page was not found!</p>
    </div>
  );
}

function Home() {
  return (
    <div>
      <h1>Welcome Home!</h1>
    </div>
  );
}

function Launch() {
  return (
    <div>
      <h1>Launch</h1>

      <Outlet />
    </div>
  );
}

function LaunchIndex() {
  return (
    <ul>
      {Object.entries(shoes).map(([slug, { name, img }]) => (
        <li key={slug}>
          <Link to={`/launch/${slug}`}>
            <h2>{name}</h2>
            <img src={img} alt={name} />
          </Link>
        </li>
      ))}
    </ul>
  );
}

function LaunchShoe() {
  const { slug } = useParams();
  const shoe = shoes[slug];

  if (!shoe) {
    return <h2>Not Found!</h2>;
  }

  const { name, img } = shoe;

  return (
    <div>
      <h2>{name}</h2>
      <img src={img} alt={name} />
    </div>
  );
}

const shoes = {
  "air-jordan-3-valor-blue": {
    name: "VALOUR BLUE",
    img:
      "https://secure-images.nike.com/is/image/DotCom/CT8532_104_A_PREM?$SNKRS_COVER_WD$&align=0,1"
  },
  "jordan-mars-270-london": {
    name: "JORDAN MARS 270 LONDON",
    img:
      "https://secure-images.nike.com/is/image/DotCom/CV3042_001_A_PREM?$SNKRS_COVER_WD$&align=0,1"
  },
  "air-jordan-1-zoom-racer-blue": {
    name: "RACER BLUE",
    img:
      "https://secure-images.nike.com/is/image/DotCom/CK6637_104_A_PREM?$SNKRS_COVER_WD$&align=0,1"
  }

};









............................................................................................................................................................................................................................

React Router Dom  V4 || Sample React Programs
..............................................................................................................................................................................................................
Example : # 1

Step # : 1 Installations
yarn add react-router-dom

import React, { Component } from 'react';
import { BrowserRouter as Router, Route, Link, Switch } from 'react-router-dom'

const User = ({match}) => {
  return (
    <div>
      <h1>Wellcome User :{match.params.name}</h1>
    </div>
  )
}

class App extends Component {
  render() {
    return (
      <Router>
        <Switch>
          <Route path='/:name' component={User} />
        </Switch>
      </Router>
    );
  }
}
export default App;

Happy Coding :)
...............................................................................................................................................................................................................................
Example : # 2

import React, { Component } from 'react';
import { BrowserRouter as Router, Route, Link, NavLink, Switch } from 'react-router-dom'

class Home extends Component {
  render() {
   // const {history}=this.props
    return (
      <div>
        <h1> Home Component</h1>
        {/* <button onClick={()=>history.push('/a')}>Go to Profile </button> */}
        <button onClick={()=>this.props.history.push('/a')}>Go to Profile </button>
      </div>
    );
  }
}

class Profile extends Component {
  render() {
    return (
      <div>
        <h1> Profile Component</h1>
      </div>
    );
  }
}

class App extends Component {
  render() {
    return (
      <Router>
        <Route path='/' exact component={Home}/>
        <Route path='/a' exact component={Profile}/>
      </Router>
     );
  }
}

export default App;

Happy Coding :)
.............................................................................................................................................................................................................................
Example : # 3  Props

Props
pass in variable from a parent into a child components

Home.js

import React, { Component } from 'react'
class Home extends Component {
    render() {
        return (
            <>
                <p>{this.props.name}</p>
                <p>{this.props.position}</p>
            </>
        )
    }
}
export default Home

App.js

import React, { Component } from 'react'
import Home from './components/Home'

const EmpDirectory = [
  {
    id: 1,
    name: 'Johan Smith',
    position: 'Software Enginner'
  }, {
    id: 2,
    name: 'Michel joe',
    position: 'Software Enginner'
  }
]

class App extends Component {
  constructor(props) {
    super(props)
    this.state = {
      Emp: EmpDirectory
    }
  }
  render() {
    return (
      <>
        {
          this.state.Emp.map((item) => {
            console.log(item)
            return (
              <div style={{backgroundColor:'red'}}>
              <Home key={item.id.toString()} 
              id={item.id}
              name={item.name} position={item.position} />
              </div>
            )
          })
        }
      </>
    )
  }
}
export default App

Happy Coding :)
.............................................................................................................................................................................................................................
Example : # 4





Happy Coding :)
.............................................................................................................................................................................................................................
Example : # 5





Happy Coding :)
.............................................................................................................................................................................................................................
Example : # 6






Happy Coding :)
.............................................................................................................................................................................................................................
Example : # 7




Happy Coding :)
.............................................................................................................................................................................................................................
Example : # 8




Happy Coding :)
.............................................................................................................................................................................................................................
Example : # 9




Happy Coding :)
.............................................................................................................................................................................................................................
Example : # 10





Happy Coding :)
.............................................................................................................................................................................................................................
Example : # 11



Happy Coding :)
.............................................................................................................................................................................................................................
Example : # 12

Happy Coding :)