Your Web News in One Place

Sources Contact Advanced Search Tutorials

An Interest In:

Web News this Week

Some of Our Sources

View All Sources

Help Webnuz

Referal links:

February 4, 2021 02:33 pm GMT

React Router in 5 minutes

React Router is the standard routing library for React. React Router keeps your UI in sync with the URL. It has a simple API with powerful features like lazy code loading, dynamic route matching, and location transition handling built right in. After reading this post you will become a master of react router. So let's get started.

How to use it?

Before using it, you need to install react-router-dom. So open up command line and install it.

npm i react-router-dom

Enter fullscreen mode Exit fullscreen mode

After it's installed, Now we need to import some stuffs.

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

Enter fullscreen mode Exit fullscreen mode

After importing, we need to wrap our whole app with browser router or where ever you want to use router, wrap the whole thing with that. Now add this switch element in browser router.

import React from "react";import { BrowserRouter, Switch, Route } from "react-router-dom";const App = () => {  return (    <>      <BrowserRouter>        <Switch>          <Route />        </Switch>      </BrowserRouter>    </>  );};export default App;}

Enter fullscreen mode Exit fullscreen mode

Now we can create routes.

import React from "react";import { BrowserRouter, Switch, Route } from "react-router-dom";const App = () => {  return (    <>      <BrowserRouter>        <Switch>          <Route            path="/"            exact            component={() => {              return (                <>                  <h1>Hello I am the home page</h1>                </>              );            }}          />        </Switch>      </BrowserRouter>    </>  );};export default App;

Enter fullscreen mode Exit fullscreen mode

So as you can see here in this code, I have created a route which is for our home page cause we have specified the path which is '/'. And then, if the path is, '/' then which thing should it render, I have created a component there. You could just create a separate one then import it and then just put it 'component={here}'.

Let's create some more routes.

import React from "react";import { BrowserRouter, Switch, Route, Router } from "react-router-dom";const App = () => {  return (    <>      <BrowserRouter>        <Switch>          <Route            path="/"            exact            component={() => {              return (                <>                  <h1>Hello I am the home page</h1>                </>              );            }}          />          <Route            path="/about"            component={() => {              return (                <>                  <h1>I am from the about page.</h1>                </>              );            }}          />          <Route            path="/blog"            component={() => {              return (                <>                  <h1>I am from the blog page.</h1>                </>              );            }}          />        </Switch>      </BrowserRouter>    </>  );};export default App;

Enter fullscreen mode Exit fullscreen mode

Now I have created multiple routes. Now we can only see the home page in the screen. How can we see the other pages? Easy! Just type 'about' after the url of your page then you will be redirected to the about page. So after writing '/about', why it is redirecting us to the about page? Cause we created the route by specifying the path which was 'about'. So when anyone will write this path, he/ she will be redirected to there. So now, it's not a cool stuff yet :(. Now we will see how can we create a awesome nav using react router. And it will be super fast. So let's create a 'Nav' component. :)

import React from "react";import { Link } from "react-router-dom";const Nav = () => {  return (    <>      <Link to="/" exact>        Home      </Link>      <Link to="/about" exact>        About      </Link>      <Link to="/blog" exact>        Blog      </Link>    </>  );};export default Nav;

Enter fullscreen mode Exit fullscreen mode

So this one was our nav component. Nothing so much fancy here. I have just imported 'Link' element from react-router-dom. The it takes a prop 'to' which specifies to where it should redirect. Now let's render it under our app component.

import React from "react";import { BrowserRouter, Switch, Route } from "react-router-dom";import Nav from "./Nav";const App = () => {  return (    <>      <Nav />      <BrowserRouter>        <Switch>          <Route            path="/"            exact            component={() => {              return (                <>                  <h1>Hello I am the home page</h1>                </>              );            }}          />          <Route            path="/about"            component={() => {              return (                <>                  <h1>I am from the about page.</h1>                </>              );            }}          />          <Route            path="/blog"            component={() => {              return (                <>                  <h1>I am from the blog page.</h1>                </>              );            }}          />        </Switch>      </BrowserRouter>    </>  );};export default App;

Enter fullscreen mode Exit fullscreen mode

So now I am rendering the Nav component in the app.js But it's showing an error why!!! Haha cause we are using Link element in Nav so we have to put the nav under the BrowserRouter cause we are putting the path's of this router in our Nav. After putting it under BrowserRouter, Then it should work just fine. :)

import React from "react";import { BrowserRouter, Switch, Route } from "react-router-dom";import Nav from "./Nav";const App = () => {  return (    <>      <BrowserRouter>        <Nav />        <Switch>          <Route            path="/"            exact            component={() => {              return (                <>                  <h1>Hello I am the home page</h1>                </>              );            }}          />          <Route            path="/about"            component={() => {              return (                <>                  <h1>I am from the about page.</h1>                </>              );            }}          />          <Route            path="/blog"            component={() => {              return (                <>                  <h1>I am from the blog page.</h1>                </>              );            }}          />        </Switch>      </BrowserRouter>    </>  );};export default App;

Enter fullscreen mode Exit fullscreen mode

Here we go, now we are getting the output just perfectly :). But a last thing how do we know in which page are we in now? So in this case, we should use NavLink instead of Link then we will have another extra prop named, 'activeClassName'. Let's make it :).

import React from "react";import { Link } from "react-router-dom";const Nav = () => {  return (    <>      <Link activeClassName="active" to="/" exact>        Home      </Link>      <Link activeClassName="active" to="/about" exact>        About      </Link>      <Link activeClassName="active" to="/blog" exact>        Blog      </Link>    </>  );};export default Nav;

Enter fullscreen mode Exit fullscreen mode

I have put a active class. Which will be styled when the page is opened/ Loaded. So style it in your way how ever you want.

In routing, we are using component prop for rendering. But we have another prop which is render. So What it does? It will create the whole component again. After the page loads.

So that's all about react router hope you enjoyed that. Thanks for reading this article. If you have any issue with my post, please let me know. And make sure you follow me to recieve all the informational posts just like that one.

:)

Original Link: https://dev.to/ratuloss/react-router-in-5-minutes-558e

Share this article:

Share on Facebook

View Full Article

Dev To

An online community for sharing and discovering great ideas, having debates, and making friends

More About this Source Visit Dev To