React Routing

Setting up React Router

Installing React Router

To set up React Router, you need to install it first using npm or yarn.

              
              npm install react-router-dom

Setting up Router in `App.js`

Once React Router is installed, you can set it up by importing `BrowserRouter` and wrapping your app in it.

              
              import { BrowserRouter } from 'react-router-dom';

function App() {
  return (
    <BrowserRouter>
      {/* Your Routes will go here */}
    </BrowserRouter>
  );
}

export default App;

Creating a Route with `Route` Component

To define a route, use the `Route` component and specify the path and component to render when the path is matched.

              
              import { Route } from 'react-router-dom';

function App() {
  return (
    <Route path="/home" component={HomePage} />
  );
}

Adding Navigation Links with `Link` Component

Use the `Link` component to add navigation between routes without a full page reload.

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

function App() {
  return (
    <Link to="/home">Go to Home</Link>
  );
}

Dynamic Routing

Using Dynamic Parameters in Routes

You can define dynamic routes using parameters with a colon (`:`).

              
              import { Route } from 'react-router-dom';

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

Accessing Dynamic Route Parameters

Use the `useParams` hook to access dynamic parameters in your component.

              
              import { useParams } from 'react-router-dom';

function UserPage() {
  const { id } = useParams();
  return <div>User ID: {id}</div>;
}

Programming Cheatsheets: Quick Reference for Productivity

Welcome to our comprehensive collection of programming language cheatsheets! Whether you're a seasoned developer or a beginner, these quick reference guides provide essential tips and key information for all major languages. They focus on core concepts, commands, and functions—designed to enhance your efficiency and productivity.

ManageEngine Site24x7, a leading IT monitoring and observability platform, is committed to equipping developers and IT professionals with the tools and insights needed to excel in their fields.

React Routing

Topics

Setting up React Router

Installing React Router

Setting up Router in `App.js`

Creating Routes and Navigation

Creating a Route with `Route` Component

Adding Navigation Links with `Link` Component

Dynamic Routing

Using Dynamic Parameters in Routes

Accessing Dynamic Route Parameters

Programming Cheatsheets: Quick Reference for Productivity

Recent Releases

Blogs

Learn

Tools