React Router in SPFx

This article explains how to integrate React Router in a SharePoint Framework (SPFx) web part to handle internal navigation without full page reloads.
React Router helps manage URL-based component rendering and is ideal for creating multi-page SPFx web parts.

⚙️ Install React Router

Install React Router DOM to handle navigation:

npm install react-router-dom --save

🧩 Create the Router Component

Below is the full implementation for the router component that manages navigation between multiple views.

import * as React from 'react';
import styles from './SpfxReactRouter.module.scss';
import { ISpfxReactRouterProps } from './ISpfxReactRouterProps';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
import { Stack, IStackTokens } from 'office-ui-fabric-react/lib/Stack';
import SpfxCustomerDetails from './SpfxCustomerDetails';
import SpfxCustomerFiles from './SpfxCustomerFiles';

const stackTokens: IStackTokens = { childrenGap: 20 };

const links = [
  { name: 'Customers', url: '/Customers' },
  { name: 'Customer Details', url: '/Customer/15' },
  { name: 'Customer Files', url: '/CustomerFiles' }
];

export default class SpfxReactRouter extends React.Component<ISpfxReactRouterProps> {
  public render(): React.ReactElement<ISpfxReactRouterProps> {
    return (
      <div className={styles.spfxReactRouter}>
        <Router>
          <Stack horizontal tokens={stackTokens}>
            {links.map((link, i) => (
              <a key={i} href={`#${link.url}`} className={styles.navLink}>{link.name}</a>
            ))}
          </Stack>
          <Switch>
            <Route path="/Customers" component={SpfxCustomers} />
            <Route path="/Customer/:id" component={SpfxCustomerDetails} />
            <Route path="/CustomerFiles" component={SpfxCustomerFiles} />
          </Switch>
        </Router>
      </div>
    );
  }
}

👥 Create Child Components

1️⃣ Customers Component

import * as React from 'react';
import styles from './SpfxReactRouter.module.scss';

export default class SpfxCustomers extends React.Component {
  public render(): React.ReactElement {
    return (
      <div className={styles.spfxReactRouter}>
        <h3>Customer List</h3>
        <ul>
          <li><a href="#/Customer/15">Customer Id 15</a></li>
          <li><a href="#/Customer/18">Customer Id 18</a></li>
          <li><a href="#/Customer/19">Customer Id 19</a></li>
        </ul>
      </div>
    );
  }
}

2️⃣ Customer Details Component

import * as React from 'react';
import { RouteComponentProps } from 'react-router-dom';
import styles from './SpfxReactRouter.module.scss';

interface ICustomerProps extends RouteComponentProps<{ id: string }> {}

export default class SpfxCustomerDetails extends React.Component<ICustomerProps> {
  public render(): React.ReactElement<ICustomerProps> {
    return (
      <div className={styles.spfxReactRouter}>
        <h3>Selected Customer Id is <span style={{ color: 'green' }}>{this.props.match.params.id}</span></h3>
      </div>
    );
  }
}

3️⃣ Customer Files Component

import * as React from 'react';
import styles from './SpfxReactRouter.module.scss';

export default class SpfxCustomerFiles extends React.Component {
  public render(): React.ReactElement {
    return (
      <div className={styles.spfxReactRouter}>
        <h3>Customer Files</h3>
        <p>This section displays related documents and records.</p>
      </div>
    );
  }
}

🚀 Build and Deploy the Solution

Run the following commands to build and deploy your web part:

gulp build
gulp bundle --ship
gulp package-solution --ship

Upload the generated .sppkg file from the sharepoint/solution folder to your App Catalog.
Deploy the package and add the web part to a SharePoint page.

📂 GitHub Sample Project

View full SPFx project on GitHub:React Router in SPFx

GitHub

✅ Summary

This SPFx web part demonstrates how to use React Router to create a client-side navigation structure within a single page.
It enhances user experience by switching views without reloading the page — perfect for building dynamic dashboards or multi-tab layouts.