How to use react router for navigation in a single Page application

2024-09-13 | 阅读：次

1. Installing React Router

To use React Router in your project, you need to install it as a dependency. Open your terminal, navigate to your project directory, and run the following command:

npm install react-router-dom

This will install the react-router-dom package, which includes all the necessary components and utilities for client-side routing.

2. Setting up routes

In React Router, routes are defined using the <Route> component. You need to wrap your entire application with a <Router> component and define the routes within it.

Here’s an example of how to set up routes in your App.js file:

import React from 'react';
import { BrowserRouter as Router, Route } from 'react-router-dom';
import Home from './components/Home';
import About from './components/About';
import Contact from './components/Contact';

function App() {
  return (
    <Router>
      <Route exact path="/" component={Home} />
      <Route path="/about" component={About} />
      <Route path="/contact" component={Contact} />
    </Router>
  );
}

export default App;

In this example, we have three routes: the home route (“/”), the about route (“/about”), and the contact route (“/contact”). For each route, we specify the path and the component to render when the path matches.

3. Navigating between routes

React Router provides a <Link> component that you can use to navigate between routes. It generates an anchor tag (<a>) with the specified path, and when clicked, it updates the URL and renders the corresponding component.

Here’s how you can use the <Link> component for navigation:

import React from 'react';
import { Link } from 'react-router-dom';

function Navigation() {
  return (
    <nav>
      <ul>
        <li>
          <Link to="/">Home</Link>
        </li>
        <li>
          <Link to="/about">About</Link>
        </li>
        <li>
          <Link to="/contact">Contact</Link>
        </li>
      </ul>
    </nav>
  );
}

export default Navigation;

In this example, we wrap each route with a <Link> component and specify the path as the to prop. When a link is clicked, the browser’s URL will be updated and the corresponding component will be rendered.

4. Passing route parameters

Sometimes, you may need to pass parameters to your routes to render dynamic content. React Router allows you to define route parameters using a colon followed by the parameter name.

Here’s an example of how to define and access route parameters:

import React from 'react';
import { BrowserRouter as Router, Route } from 'react-router-dom';
import User from './components/User';

function App() {
  return (
    <Router>
      <Route path="/user/:id" component={User} />
    </Router>
  );
}

export default App;

In this example, the User component will be rendered when the URL matches the pattern “/user/:id”. The id parameter can be accessed within the User component using the useParams hook from React Router.

5. Accessing query parameters

In addition to route parameters, you can also access query parameters in your routes. Query parameters are specified after a question mark in the URL and are key-value pairs separated by an ampersand.

React Router provides the useLocation hook to access the current URL and extract query parameters from it.

Here’s an example of how to access query parameters in your component:

import React from 'react';
import { useLocation } from 'react-router-dom';

function User() {
  const location = useLocation();
  const queryParams = new URLSearchParams(location.search);
  const id = queryParams.get('id');

  return (
    <div>
      <h2>User</h2>
      <p>ID: {id}</p>
    </div>
  );
}

export default User;

In this example, we use the useLocation hook to get the current URL. We then create a new URLSearchParams object and pass the search property of the location object to it. Finally, we use the get method of the URLSearchParams object to retrieve the value of the “id” query parameter.

That’s it! You have now learned how to use React Router for navigation in a single-page application. React Router provides a flexible and powerful way to handle routing and navigation in your React projects. Happy coding! 参考文献：

How to Create a Responsive Navigation Menu with CSS

极简博客

极简博客github