reactjsHow can I implement navigation in a React.js application?

To implement navigation in a React.js application, you can use React Router, a popular library for routing. React Router allows you to create and manage routes in a declarative manner, with the help of components such as <Link> and <Route>.

Here is an example of how to use React Router to create a basic navigation system:

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

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>
        <Switch>
          <Route path="/about">
            <About />
          </Route>
          <Route path="/users">
            <Users />
          </Route>
          <Route path="/">
            <Home />
          </Route>
        </Switch>
      </div>
    </Router>
  );
}

This example code will create a basic navigation system with three links: Home, About, and Users. When a user clicks on one of the links, the corresponding component will be rendered.

Code explanation

• import { BrowserRouter as Router, Switch, Route, Link } from "react-router-dom";: This imports the necessary components from the React Router library.

• <Router>: This wraps the entire application in the Router component, which is necessary for React Router to work.

• <Link>: This component is used to create links between pages.

• <Route>: This component renders a component when the URL matches its path.

• <Switch>: This component ensures that only one route is rendered at any given time.

For more information, check out the React Router documentation.

Edit this code on GitHub