React router best practices

Explain react-router and react-router-dom.

react-router logo

React router called “Dynamic Router”

In many frameworks like Rails, Express.js and Anglerjs we use the static router which configured in the beginning of your application. In rails application we have file called routes.rb in this file we make or routeing to start application from it’s controller.

But here with React router forget this, we can config or route when we want in which file we want as we want as possible.

Simple example

I will use create-react-app to build this example and we need install some dependencies such nodejs , npm inside it and react-router-dom using npm/yarn.

Create project:

in terminal write

create-react-app simple-example

and goes to it’s folder in terminal

cd simple-example

we are now in simple-example and now we will install react-router-dom using npm which already installed we still inside terminal

npm install react-router-dom

after install all dependencies we can coding.

in index.js file which created by create-react-app we will warp <App /> component with Router component <BrowserRouter>

// index.js
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import registerServiceWorker from './registerServiceWorker';
import { BrowserRouter } from 'react-router-dom';
ReactDOM.render(
{/* Router is the core of every react router component */}
<BrowserRouter>
  <App />
</BrowserRouter>
, document.getElementById('root'));
registerServiceWorker();

Router component in react router

It should in the core of every react router app we can choice one of two component,<BrowserRouter> or <HashRouter>. Both of these will create a specialized history object for you. and if you have static server file like working with API use HashRouter instead of BrowserRouter.

Route , Link and NavLink

after initialize the first step of using Route component <BrowserRouter> which provide from react-router-dom. we should build or customized route and links to navigation around the route.

in App.js we will create the nav links and will config it’s route dynamically no need for routes file like in Rails framework. we will use <NavLink> component from react-router-dom with warp links like and create <a> tag in html. write the code after the end of </header> tag
<div className='nav'>

  <ul>
    <li><NavLink to="/home">Home</NavLink></li>
    <li><NavLink to="/next">Next</NavLink></li>
    <li><NavLink to="/last">Last</NavLink></li>
  </ul>
</div>

Now we can config the route of <NavLink > component. but before doing this I want talk in brief about the <Link > component. We can any of both <NavLink > or <Link > component to navigation around configured routes but the main difference between them as I now is <NavLink > give us activeClassName props to generate class for active link is most using for css. The default className generated by <NavLink > is .active

{/* activeClassName value can be an name to modify it in css styles */}
<NavLink activeClassName='any-name' to="/home">Home</NavLink>
{/* don't use the same in <Link> below is wrong use of <Link >*/}
<Link activeClassName='any-name' to="/home">Home</Link>

Config the route in App.js file

<div className="App-intro">
  <Route path='/home' exact component={Home} />
  <Route path='/next' component={Next} />
  <Route path='/last' component={Last} />
  <Redirect to='/home' />
</div>

<Route> render the component if matches the pathname for example :

http://localhost:3000/home 

this url ^ path will render the home component inside the App.js component. exact props ensure if path is exactly home see the first <NavLink>

the App is mostly ready just create the Home.js , Next.js and Last.js and import them in the top of App.js

// src/Home.js
import React from 'react';

let Home = () => {
 return(
   <div>
     <h1> Hey I'm Home </h1>
   </div>
  )
}

export default Home

Next.js and Last.js is same like above only text will change

the example is on github URL: https://github.com/mohammedOmer/simple-routing-in-react

Installation instruction inside README.md on repository.

Conclusion

• react-router-dom will give all the component of react-router
• <NavLink> is better than <Link> for UI if it’s in shared View Like Header Or Footer.
• config Router in start of application like index.js to run <Route > properly

All the best hacking in Your way. Mohammed Aljefri Full stack developer in ClickApps co clap me on clap button below if you like this article