how to routing in react js

Hello coders! In this article I have shared the details about “how to routing in react js”. Okay, let’s move on to the tutorial.

how to routing in react js

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

export default function App() 
  return (
    <Router>
      <div>
        <nav>
          <ul>
            <li>
              <Link to="/">Home</Link>
            </li>
            <li>
              <Link to="/about">About</Link>
            </li>
            <li>
              <Link to="/users">Users</Link>
            </li>
          </ul>
        </nav>

        /* A <Switch> looks through its children <Route>s and
            renders the first one that matches the current URL. */
        <Switch>
          <Route path="/about">
            <About />
          </Route>
          <Route path="/users">
            <Users />
          </Route>
          <Route path="/">
            <Home />
          </Route>
        </Switch>
      </div>
    </Router>
  );


function Home() 
  return <h2>Home</h2>;


function About() 
  return <h2>About</h2>;


function Users() 
  return <h2>Users</h2>;

npm install react-router-dom
import React from "react";
import 
  BrowserRouter as Router,
  Switch,
  Route,
  Link,
  useRouteMatch,
  useParams
 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="/topics">Topics</Link>
          </li>
        </ul>

        <Switch>
          <Route path="/about">
            <About />
          </Route>
          <Route path="/topics">
            <Topics />
          </Route>
          <Route path="/">
            <Home />
          </Route>
        </Switch>
      </div>
    </Router>
  );


function Home() 
  return <h2>Home</h2>;


function About() 
  return <h2>About</h2>;


function Topics() 
  let match = useRouteMatch();

  return (
    <div>
      <h2>Topics</h2>

      <ul>
        <li>
          <Link to=`$match.url/components`>Components</Link>
        </li>
        <li>
          <Link to=`$match.url/props-v-state`>
            Props v. State
          </Link>
        </li>
      </ul>

      /* The Topics page has its own <Switch> with more routes
          that build on the /topics URL path. You can think of the
          2nd <Route> here as an "index" page for all topics, or
          the page that is shown when no topic is selected */
      <Switch>
        <Route path=`$match.path/:topicId`>
          <Topic />
        </Route>
        <Route path=match.path>
          <h3>Please select a topic.</h3>
        </Route>
      </Switch>
    </div>
  );


function Topic() 
  let  topicId  = useParams();
  return <h3>Requested topic ID: topicId</h3>;

npx create-react-app nameOfApplication
cd nameOfApplication
when we create the application we use this commands.

Final Thoughts

I hope this tutorial helps you to know about “how to routing in react js”. If you have any questions regarding this article please let us know via the comment section. Share this post with your friends and family via social networks.

Hi, I'm Ranjith a full-time Blogger, YouTuber, Affiliate Marketer, & founder of Coder Diksha. Here, I post about programming to help developers.

Share on:

Leave a Comment