Routing with React Router V6

Zaid Akhter — Wed, 17 Jun 2020 15:56:47 +0000

React Router has been the go to routing solution for most react applications. Is simple to use and offers tons of features. If you've used react router before you'd be pleased to know it just got better with its next major version, version 6. Now, react router version 6 is currently in alpha. But it's expected to launch a stable version soon. Also you should know this post is for people already familiar with react router.

Now lets talk about some key changes with react router version 6. First of all, it has smaller bundle sizes but still manages to pack in more functionality.

Installation

Run the following command to install with npm:

$ npm i react-router@next react-router-dom@next

or with yarn:

$ yarn add react-router@next react-router-dom@next

`<Route/>`

In previous versions, you could use the route element like:

<Route path="/" component={Home} />
<Route path="/" render={() => <Home/>} />
<Route path="/" children={<Home/>} />
<Route path="/">
  <Home/>
<Route/>

These methods don't work in version 6. In version 6, you can use the <Route/> element as:

<Route path="/" element={<Home/>} />

`<Routes/>`

The <Switch/> component has been replaced by <Routes/> in version 6. So you can do something like:

<Routes>
  <Route path="/" element={<Home/>} />
  <Route path="/user" element={<User/>} />
<Routes/>

It is important to note that all <Route/> elements must be wrapped in <Routes/> element. Also we no longer need to use the exact prop on <Route/>. Routes are matched exactly by default.

Nesting Routes

Nesting routes in older versions of react router was a bit non-intuitive. But version 6 makes it easier:

function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="users" element={<Users />}>
          <Route path="/" element={<UsersIndex />} />
          <Route path=":id" element={<UserProfile />} />
          <Route path="me" element={<OwnUserProfile />} />
        </Route>
      </Routes>
    </BrowserRouter>
  );
}

function Users() {
  return (
    <div>
      <nav>
        <Link to="me">My Profile</Link>
      </nav>

      <Outlet />
    </div>
  );
}

The <Outlet/> component in Users component serves as a placeholder. It will render a component depending on the current location.

Object-based Routes

Version 6 allows us to define routes as JavaScript objects using the useRoutes() hook which accepts an array of route objects. A route object has the same properties as a <Route>. For example the routes above can also be defined as:

function App() {
  let element = useRoutes([
    // element. The `children` is just an array of child routes.
    { path: '/', element: <Home /> },
    {
      path: 'users',
      element: <Users />,
      children: [
        { path: '/', element: <UsersIndex /> },
        { path: ':id', element: <UserProfile /> },
        { path: 'me', element: <OwnUserProfile /> },
      ]
    }
  ]);

  return element;
}

It is important to note that the useRoutes() hook must be in context of <BrowserRouter/>. That is why we removed it from the App.

`useNavigate()`

React router version 6 replaces the useHistory() hook with the useNavigate() hook. Which can be used as below:

function App() {
  let navigate = useNavigate()

  return (
    <div>
      <button onClick={() => navigate("/home")}>
        Go Home
      </button>
    </div>
  );
}

You can pass a second optional parameter in navigate. It will be an object and it can contain state if you want to pass in state. You can also pass in replace:true to mimic the behavior of history.replace().

Alternatively, you can also pass in a positive or negative integer in the navigate function. This will navigate us forward or backwards in the browser history stack. For example navigate(1) will take us 1 page forward. Similarly, navigate(-2) will take us 2 pages back.

Conclusion

To wrap up react router version 6 brings cool new features. And makes it more intuitive to use. There are some more minor features which I haven't mentioned. But I have covered the main features coming in react router version 6. And that should be enough to get you started with it.

Rest Parameters

Zaid Akhter — Thu, 19 Mar 2020 18:56:09 +0000

Rest parameters are a feature introduced in ES6. They allow us to represent any indefinite number of arguments in a function as an Array.

To use this new syntax, you can simply prefix the parameter with ... and this will create an array with all the user supplied arguments. In the restDemo function below I simply return the parameters:

const restDemo = (...parameters) => {
  return parameters;
};

console.log(restDemo(2, 3));
// expected output: [2,3]

console.log(restDemo(1, 2, 3, 4, 5));
// expected output: [1,2,3,4,5]

console.log(restDemo('hi'));
// expected output: ['hi']
// Rest parameters will put even a single element into an array

console.log(restDemo());
// expected output: []
// If no elements are passed it is defined as an empty array

Now, lets consider a simple use case for rest parameters. The add function below takes any number or arguments as input and returns their sum. I am using ES6 array method reduce here to add the values.

const add = (...numbers) => {
  return numbers.reduce((n, sum) => (sum += n), 0);
};

console.log(add(2, 3));
// expected output: 5

console.log(add(1, 2, 3, 4, 5));
// expected output: 15

Also, an important thing to note is that rest parameters can only be applied to the very last argument of a function. Consider some functions as below, the firstFunction passes the second parameter b as a rest parameter. This will throw an error.

const firstFunction=(a,...b,c)=>{
  // some code
  // this will throw an error
}

While the secondFunction passes the third(and last) parameter c as a rest parameter. This will put all the parameters after the first two into an array.
If only two parameters are passed c will be defined as an empty array.

const secondFunction=(a,b,...c)=>{
  // some code
}

// Examples
secondFunction(1,2) // a=1, b=2 ,c=[]

secondFunction(1,2,3,4) // a=1, b=2 ,c=[3,4]

DEV Community: Zaid Akhter