Difference Between React Router DOM v5 & v6

Shyam-Dadhaniya — Tue, 25 Apr 2023 05:27:42 +0000

React does not have built in routing solutions that’s why we need to reach out for an external library. And most popular and reliable option out there is react-router. And v6 is just the latest and greatest option with bunch of cool new features and custom hooks.

Installation:

npm install react-router-dom@6

Routes is replaced with Switch:

In react router dom v6 switch is no longer available switch is replaced with the Routes in react router dom v6.

// old - v5
import { BrowserRouter, Switch, Route } from 'react-router-dom';
const App = () => {
  return (
    <BrowserRouter>
      <Switch>
        <Route exact path="/" component={HomePage} />
        <Route path="/users" component={Users} />
      </Switch>
    </BrowserRouter>
  );
}

// new - v6
import { BrowserRouter, Routes, Route } from 'react-router-dom';
const App = () => {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<HomePage />} />
        <Route path="users" element={<Users />} />
      </Routes>
    </BrowserRouter>
  );
}

2.Route component is replaced with Route element

If you notice in the above example, in the new version we are passing a react element instead of a component. This is so much better, now we can pass props directly to the element.

// old - v5
<Route path="/">
  <HomePage/>
</Route>
-----------or------------
<Route path="/" component={HomePage} />

// new - v6
<Route path=”/” element={<HomePage/>}/>

3.Exact is no longer available:

React router v6 doesn't support exact anymore. As stated in their documentation: You don't need to use an exact prop anymore. This is because all paths match exactly by default.

// old - v5
<Route path="/"  exact component={HomePage} />

// new - v6
<Route path=”/” element={<HomePage/>}/>

4.Redirect is replaced with Navigate:

Redirect is no longer available in React Router Dom v6. Instead, the library offers a new component called Navigate that serves a similar purpose.

// old - v5
import { BrowserRouter, Switch, Route, Redirect } from 'react-router-dom';
const App = () => {
  return (
    <BrowserRouter>
      <Switch>
        <Route exact path="/" exact>
            <Redirect to="/welcome">
        </Route>
        <Route path="/welcome" component={Welcome} />
        <Route path="/users" component={Users} />
      </Switch>
    </BrowserRouter>
  );
}

// new - v6
import { BrowserRouter, Routes, Route, Navigate } from 'react-router-dom';
const App = () => {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<Navigate to= "/welcome" />} />
        <Route path="/welcome" element={<Welcome />} />
        <Route path="users" element={<Users />} />
      </Routes>
    </BrowserRouter>
  );
}

5.NavLink:

NavLink component is a useful tool for creating navigation links that indicate which page the user is currently on, and it provides several props that can be used to customize the behavior and styling for that particular navlink.
exact prop: In version 5, you can use the exact prop to ensure that the link is only active when the current URL matches exactly. In version 6, this functionality is achieved using the end prop.
In the previous version we could set a seperate class or a style object for the time when the would be active. In V6, these two props are removed, instead in case of Nav Links className and style props, work a bit differently. They take a function which in turn gives up some information about the link, for us to better control the styles.

// old - v5
<NavLink
  to="/news"
  style={{ color: 'black' }}
  activeStyle={{ color: 'blue' }}>
</NavLink>

<NavLink
  to="/news"
  className="nav-link"
  activeClassName="active">
</NavLink>

// new - v6
<NavLink
  to="/news"
  style={({isActive}) => { color: isActive ? 'blue' : 'black' }}>
</NavLink>

<NavLink
  to="/news"
 className={({ isActive }) => (isActive ? "link active" : "link")}
</NavLink>

6.Outlet:

The Outlet component is used to render the child components of a route.
An should be used in parent route elements to render their child route elements. This allows nested UI to show up when child routes are rendered.

function App() {
return (
  <Routes>
   <Route path="/" element={<Dashboard />}>
     <Route path="messages" element {<DashboardMessages />}/>
     <Route path="tasks" element={<DashboardTasks />} />
   </Route>
    </Routes>
  );
}


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

      {/* This element will render either <DashboardMessages> when the URL is
          "/messages", <DashboardTasks> at "/tasks", or null if it is "/"
      */}
      <Outlet />
    </div>
  );
}

The summary of the outlet is simple placeholder which simply telling react route that where nested content, nested route content should be inserted.So this an alternative to define nested routes inside of other parent components.

7.Form:

React router dom provides Form component which is useful for easiness of form handling.You have to provide method and action props to the Form component.
Action route must be same as route which have equivalent action method.
Action method receives object which have two properties params and request.
You can get form-data from calling formData method on request object.
You can also validate form data and return error object which you can access by using useActionData hook.
This feature only works if using a data router like createBrowserRouter

----- App.js 

import "./styles.css";
import {
  createBrowserRouter,
  createRoutesFromElements,
  Route,
  RouterProvider
} from "react-router-dom";
import Home from "./Components/Home";
import Contact, { contactAction } from "./Components/Contact";

const router = createBrowserRouter(
  createRoutesFromElements(
    <Route>
      <Route path="/" element={<Home />} />
      <Route path="contact" element={<Contact />} action={contactAction} />
    </Route>
  )
);
export default function App() {
  return <RouterProvider router={router} />;
}

----- Contact.jsx

import { Form, redirect, useActionData } from "react-router-dom";
const Contact = () => {
  const Errordata = useActionData();
  return (
    <>
      <h3>Contact Us</h3>
      <Form method="post" action="/contact">
        <label>
          <span>Your Email: </span>
          <input type="email" name="email" required />
        </label>
        <label>
          <span>Your Message: </span>
          <input name="message" required />
        </label>
        <button>Submit</button>
        {Errordata && Errordata.error}
      </Form>
    </>
  );
};

export default Contact;

export const contactAction = async ({ request }) => {
  console.log(request);
  const data = await request.formData();
  console.log(data);
  const submission = {
    email: data.get("email"),
    message: data.get("message")
  };

  console.log(submission);
  if (submission.message.length < 5) {
    return { error: "Message must be 5 charecter long" };
  }
  return redirect("/");
};

For demo you can visit below github repository:

https://github.com/Shyam-Dadhaniya/react-router-v6

Happy Coding 🚀

How to use multiple github accounts in a single system using SSH key in LINUX/UBUNTU

Shyam-Dadhaniya — Fri, 03 Feb 2023 06:40:15 +0000

The majority of developers could find it necessary to operate many GitHub accounts on a single computer. On the same machine, for instance, you might run both your personal projects' GitHub account and the account for your organization.

It only takes a fairly straightforward combination of ssh and git setup to implement this. For users of LINUX/UNIX, follow the instructions below.

1. Open Terminal

2. Generating the SSH keys

Step-1: Write the following command: $ ssh-keygen

After that command it should look like this:

Step-2: Write your folder path as show below image:

In the below image I've written youraccount for the path, in that you can write any name as per your requirement (yourname_work).

Now for passphrase we need to put it empty for now.
Once you enter empty passphrase then next step is Enter same passphrase again in that we put empty passphrase again

Now, go to the .ssh folder.
Run the below command: cat youraccount.pub

Copy the key starting with ssh-rsa
Go to the your github account in the web browser and then go to the settings tabs as shown in the figure below.

Now go to the SSH and GPG key tab as show in below image:

Click on New SSH key button
You will be able to see the below screen:
1. name: (as per your wish)
2. key: paste the key which we've copied from the .ssh folder
Open the config file which is present in the .ssh folder in your preferred code editor.

The above mentioned steps lets you generate and configure an ssh key.
You can follow these same steps as mentioned above to generate more ssh keys and configure it accordingly to set multiple ssh keys in the very same system.
Copy the below code and paste it in the config file. Make changes in your host, hostname and identity file as per your requirement.

#First generated and configured account with ssh key
Host github.com-shyam_work
 HostName github.com
 IdentityFile ~/.ssh/shyam-work


 #Further generated and configured account with ssh key
 Host github.com-shyam_personal
  HostName github.com
  IdentityFile ~/.ssh/shyam-personal

3. Clone Repo

git clone git@github.com-shyam_work:git-account-name/git-ssh-testing.git

git clone git@github.com-shyam_personal:git-account-name/git-ssh-testing.git

Happy Coding.. 😊

DEV Community: Shyam-Dadhaniya

Difference Between React Router DOM v5 & v6

How to use multiple github accounts in a single system using SSH key in LINUX/UBUNTU

1. Open Terminal

2. Generating the SSH keys

3. Clone Repo