ReactJS Router – Navigation In React

By /

To get started with React Router in a web app, you’ll need a React web app. If you need to create one, we recommend you try https://github.com/facebook/create-react-app ( create react app). It’s a popular tool that works really well with React Router.

You can install React Router from https://www.npmjs.com/package/react-router-dom with either npm or yarn. Since we’re building a web app, we’ll use react-router-dom in this guide.

What is React Router?

Components are the heart of React\’s powerful, declarative programming model. React Router is a collection of navigational components that compose declarative with your application. Whether you want to have bookmarkable URLs for your web app or a compos-able way to navigate in React Native, React Router works wherever React is rendering–so take your pick!

Usage with React Router:

It allows you to build single page web applications (SPA) with navigation. React Router uses component structure to call components. React router also provide functionality like the refresh page and back to url.

Features :

Here\’s a run-down of a few of the features we\’re excited about:

• Smaller bundle. Current size of the Router dependency in a fully migrated app is around 3kb
• Built of composable parts. Simple apps don\’t need everything.
• Smart path matching, no more messing around with the order of your routes or exact props
• Nested Route Configs (much like v3 and @reach/router)
• Relative Links, navigation, and routes
• Access route data with useParams() from anywhere below the route
• Access to location and navigate with useLocation() anywhere in the app.
• Route parameter validation
• Route matching on location state
• Automatic focus management on route transitions
• Concurrent/Suspense Ready

React not provide router by default. So need to install

You can also install the router from https://www.npmjs.com/package/react-router-dom with ether npm or yarn.

In Linux & Mac you can install the react router:
npm install –save react-router-dom
In window machine you can install the react router.
npm install react-router-dom
Using yarn
yarn add react-router-dom

After run this command lets confirm the installation success and dependencies is listed or not . Go to package.json and in dependencies list see the name \”react-router-dom\”: version

ex. \”react-router-dom\”: \”^5.2.0\”

Important Info

• BrowserRouter is the router implementation for HTML5 browsers (vs Native).
• Link is your replacement for anchor tags.
• NavLink is also replacement for anchor tags but it provide the one extra attributes name as activeClassName.
• Exact attributes match the exact url of browser with the url given in route
• Route is the conditionally shown component based on matching a path to a URL
• Switch returns only the first matching route rather than all matching routes

Basic Routing Example

In this example we have 2 \”pages\” handled by the router: a home page, an about page. As you click around on the different s, the router renders the matching .

Note: Behind the scenes a renders an with a real href, so people using the keyboard for navigation or screen readers will still be able to use this app.

If no link get in the route must render to page not found page so we add the code

Next, copy/paste either of the following examples into src/App.js.


import React from \"react\";
import {
  BrowserRouter as Router,
  Switch,
  Route,
  Link
} from \"react-router-dom\";

export default function App() {
  return (
  <Router>
  <div>
  <ul>
    <li><Link to="/">Home</Link></li>
    <li><Link to="/about">About</Link></li>
    <li><Link to="/dashboard">Dashboard</Link></li>
  </ul>
  <hr />
  <Switch>
    <Route exact path="/"><Home /></Route>
    <Route path="/about"><About /></Route>
    <Route path="/dashboard"><Dashboard /></Route>
  </Switch>
  </div>
  </Router>
  );
}

function Home() {
  return (
  <div>
  <h2>Home</h2>
  </div>
   );
}

function About() {
  return (
   <div>
  <h2>About</h2>
  </div>
  );
}

function Dashboard() {
   return (
   <div>
   <h2>Dashboard</h2>
   </div>
   );
}

Passing parameter to url

Params are placeholders in the URL that begin with a colon, like the `:id` param defined in

<Route path=”/:id” children={<Child />} /></p>

Example of passing parameter


import React from \"react\";
import {
  BrowserRouter as Router,
  Switch,
   Route,
   Link,
   useParams
} from \"react-router-dom\";

export default function ParamsExample() {
   return (
  <Router>
  <div>
    <h2>Accounts</h2>
    <ul>
      <li><Link to="/netflix">Netflix</Link></li>
      <li><Link to="/zillow-group">Zillow Group</Link></li>
      <li><Link to="/yahoo">Yahoo</Link></li>
      <li><Link to="/modus-create">Modus Create</Link></li>
    </ul>
    <Switch><Route path="/:id" children={<Child />} /></Switch>
  </div>
  </Router>
   );
}

function Child() {
// We can use the `useParams` hook here to access
// the dynamic pieces of the URL.
  let { id } = useParams();
   return (
   <div>
     <h3>ID: {id}</h3>
   </div>
  );
}

Related Posts