Getting started with React Router

 Is react router is static or dynamic?

Before the react router v4 it is static after v4 it is Dynamic.

In single page apps, there is only single html page.we are reusing the same html page to render the different components based on the navigation.But in multipage apps, you will get an entirely new page from the server when you navigate.

How to install the react router?

npm install @types/react-router-dom

index.tsx

import * as React from 'react'
import { HashRouter as Router, Route, Link, Switch } from 'react-router-dom'
import { render } from 'react-dom';
import {Home, Contact, Feedback} from "./Navigation";


class App extends React.Component {
  render() {
    return (
      <Router>
        <div>
          <nav>
            <Link to="/">Home</Link><br></br>
            <Link to="/Contact">Contact</Link><br></br>
            <Link to="/Feedback">Feedback</Link>
          </nav>
          <Switch>
            <Route exact path="/" component={Home} />
            <Route exact path="/Contact" component={Contact} />
            <Route exact path="/Feedback" component={Feedback} />
          </Switch>
        </div>
      </Router>
    );
  }
}
render(<App />, document.getElementById('root'));

Navigation.tsx

import React from 'react';

export const Home = () => <h1>Home Page</h1>;
export const Contact = () => <h1>Contact Page</h1>;
export const Feedback = () => <h1>Feedback Page</h1>;

Output: