React router best practices

React router best practices

Explain react-router and react-router-dom.

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

then open created react app folder simple-example by running
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 component with Router component <BrowserRouter>
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 component. but before doing this I want talk in brief about the component. We can any of both or component to navigation around configured routes but the main difference between them as I now is give us activeClassName props to generate class for active link is most using for css. The default className generated by 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>

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
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"

const 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
  • is better than for UI if it’s in shared View Like Header Or Footer.
  • config Router in start of application like index.js to run properly