How to create a routing sample in React Grid component

17 Mar 20252 minutes to read

React Router is a popular routing library which is widely used for building single-page applications (SPA’s) with React. It provides a way to handle navigation and routing in your application, allowing you to define different routes and render different components based on the current URL.

Steps to create a routing sample in React Grid component

1. Creating a React project and integrating the Syncfusion^® Grid component:

A simple React project can be created by following the steps under getting started section of this documentation. Run the following command in the terminal to install React Router.

npm install react-router-dom

To use React routing in your application, you need to create at least two components that can be navigated from one to another.

2. Setting up Router:

Import the component from the react-router-dom library and wrap it around your list of components

import { BrowserRouter, Routes, Route } from 'react-router-dom';

const App = () => {
    return (
        <BrowserRouter>
            <Routes>
            </Routes>
        </BrowserRouter>
    );
}

export default App;

3. Defining Routes:

Inside your application, you can define different routes using the component. Each route represents a URL pattern and the component to render when that pattern matches.

import { BrowserRouter, Routes, Route } from 'react-router-dom';

const App = () => {
    return (
        <BrowserRouter>
            <Routes>
                <Route path='Home' element={<Home />}></Route>
                <Route path='Contact' element={<Contact />}></Route>
                <Route path='About' element={<About />}></Route>
            </Routes>
        </BrowserRouter>
    ); 
};

export default App;

4. Navigation between Routes:

You can navigate between routes using the component. It renders an anchor tag that triggers a route change when clicked, without causing a full page to reload.

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

const Header = () => {
    return (
        <div>
            <nav>
                <ul>
                    <li><Link to='/'>Home</Link></li>
                    <li><Link to='/About'>About</Link></li>
                    <li><Link to='/Contact'>Contact</Link></li>
                </ul>
            </nav>
        </div>
    );
};

export default Header;

Here, you can find the React Routing sample with Syncfusion^® DataGrid.