React Routing and its Components

Last Updated On Friday 17th Jun 2022

React Router DOM

  • A single-page application built with React uses routing to achieve page jumps.
  • In React, the commonly used two packages can achieve this demand, that is, react-router and react-router-dom.

React Router DOM

  • Based on react-router, some functions in the browser operating environment have been added.
  • react-router-dom depends on react-router.
	npm install react-router-dom
yarn add react-router-dom
	

Components in React Router

Router: <BrowserRouter> and <HashRouter>
Route Matcher: <Route> and <Switch>
Route Changer:<Link> , <NavLink> and <Redirect>

Router

The Main Difference between is <BrowserRouter> and <HashRouter>

  • How the way they store URLs and communicate with the webserver.
  • To use a router, make sure to present it at the root of the element
	import React from "react";
import ReactDOM from "react-dom";
import { BrowserRouter } from "react-router-dom";

const App = () => (
  <h1>Hello World!!</h1>
);

ReactDOM.render(
  <BrowserRouter>
    <App />
  </BrowserRouter>,
  document.getElementById("root")
);

	

Route Matcher

When <Switch> renders, it will search its children <Route> contents to find a path that matches the current URL.

	import React from "react";
import ReactDOM from "react-dom";

import {
  BrowserRouter,
  Switch,
  Route
} from "react-router-dom";

const Contact = () => <div>Contact US</div>;

const App = () => (
  <BrowserRouter>
    <Switch>
      <Route path="/contact" component={Contact}></Route>
    </Switch>
  </BrowserRouter>
);

ReactDOM.render(
  <App />,
  document.getElementById('root')
);

	

Route Changer

  • <Link> component to create a link in the application.
  • <Redirect> use when forced navigation.
  • <NavLink> It is a special type <Link> that will add style parameters.
	<div>
  <Link to="/">Contact</Link>
  <NavLink to="/contact2" activeClassName="name">
    React
  </NavLink>
  <Redirect to="/signup" />
</div>;
	
react router components
expected an assignment or function call and instead saw an expression
npm react router dom
react router component
react router dom component
react does not recognize the activeclassname
react routing component
react router in component
npm install react router
difference between browserrouter and hashrouter