Create React Router from scratch

React router is a very important module. It helps to create the different URL paths to load different Components. In this example, let’s have 3 different URLs and link them to 3 separate components.

URL	Component
/	<Home />
/blog	<Blog />
/contact	<Contact />

Step1. Install the react-router-dom module

npm install react-router-dom

Step2. Import and wrap the <App /> component in index.js with <BrowserRouter /> as below.

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import {BrowserRouter} from 'react-router-dom'

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

Step3. Create the <Home />, <Blog /> and <Contact /> Components as below.

const Home = (props) => {
    return (
        <div>
            This is the Home page
        </div>
    )
}

export default Home

const Blog = (props) => {
    return (
        <div>
            This is the Blog page
        </div>
    )
}

export default Blog

const Contact = (props) => {
    return (
        <div>
            This is the Contact page
        </div>
    )
}

export default Contact

Step4. Configure the Routes and paths in App.js using <Route> and <Switch>

import Home from './Components/Home';
import Blog from './Components/Blog';
import Contact from './Components/Contact';
import { Route } from 'react-router-dom'

function App() {
  return (
    <div className="App">
      <Switch>
      <Route path="/blog">
          <Blog />
      </Route>
      <Route path="/contact">
          <Contact />
      </Route>
      <Route path="/">
          <Home />
      </Route>
      </Switch>
    </div>
  );
}

export default App;

Note : <Switch> helps to only activate one route at the same time. It looks for a match from top to bottom.

Quick Hint : You can define Routes in any Component, and NOT ONLY in App.js

Step5. Create the Links for each of those paths. In other words, replace the anchor tags with Link

<Link to="/">Blog</Link>
<Link to="/">Contact</Link>
<Link to="/">Home</Link>

Additional Concepts on Exact, Redirect and NavLink

As the name suggests, use exact along with Route to match the path exactly as mentioned.

        <Route path="/blog">
            <MenuBar />
            <Blog />
        </Route>

In the above snippet, any paths e.g. /blog, /blog/home, /blog/user, /blog/user/new will be matched. You may not want that. Use the exact attribute to use a Route only in case of an exact match.

        <Route path="/blog" exact>
            <MenuBar />
            <Blog />
        </Route>

Above code will only match with /blog

Use Redirect to Route requests using a specific url pattern to a particular page, for example, the home page.

      <Route path="/">
        <Redirect to="/">
          <Home />
        </Redirect>
      </Route>

With the above Route, if you type /abc/xyz, the <Home /> Component will be loaded, and the URL will change from /abc/xyz to / in the browser.

Another very important concept is <NavLink>. Instead of using <Link>, you can use <NavLink> to very easily show which one is the currently active menu.

<NavLink activeClassName="active" className="nav-link" to="/">Home</NavLink>
<NavLink activeClassName="active" className="nav-link" to="/blog">Blog</NavLink>
<NavLink activeClassName="active" className="nav-link" to="/about">About</NavLink>

You just mention the CSS class that needs to take effect upon clicking the link.

A typical example of this use case is a top header menu, as shown below.

You can easily change the highlights on the Link while using NavLink.

In order to use NavLink to direct to External URLs, use the below code.

<NavLink activeClassName="active" className="nav-link" to={{ pathname: "external_url" }} target="_blank">Blog</NavLink>

If you are new to React, get started here.