Introduction

Routing in single-page applications (SPAs) enables navigation between views without reloading the application. React Router is the standard library for routing in React applications. This article provides a brief overview of setting up routing with TypeScript.

Setting Up the Project

1. Create a new React project

Bash
npx create-react-app react-router-ts --template typescript

2. Navigate to the project directory

Bash
cd react-router-ts

3. Install React Router

Bash
npm install react-router-dom
npm install @types/react-router-dom

Basic Routing Setup

Create components

Home.tsx

TypeScript
const Home: React.FC = () => {
  return <h1>Home Page</h1>;
};

export default Home;

About.tsx

TypeScript
const About: React.FC = () => {
  return <h1>About Page</h1>;
};

export default About;

Contact.tsx

TypeScript
const Contact: React.FC = () => (
  <h1>Contact Page</h1>
);

export default Contact;

Set up routing in App.tsx

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

const App: React.FC = () => (
  <Router>
    <nav>
      <ul>
        <li>
          <Link to="/">Home</Link>
        </li>
        <li>
          <Link to="/about">About</Link>
        </li>
        <li>
          <Link to="/contact">Contact</Link>
        </li>
      </ul>
    </nav>
    <Routes>
      <Route path="/" element={<Home />} />
      <Route path="/about" element={<About />} />
      <Route path="/contact" element={<Contact />} />
    </Routes>
  </Router>
);

export default App;

Render the App component in index.tsx

TypeScript
import ReactDOM from 'react-dom/client';
import App from './App';

const root = ReactDOM.createRoot(
  document.getElementById('root') as HTMLElement
);

root.render(<App />);

Enhancing Navigation

Highlight active links.

TypeScript
import { NavLink } from 'react-router-dom';
<nav>
  <ul>
    <li>
      <NavLink to="/" end>
        Home
      </NavLink>
    </li>
    <li>
      <NavLink to="/about">About</NavLink>
    </li>
    <li>
      <NavLink to="/contact">Contact</NavLink>
    </li>
  </ul>
</nav>

Add nested routes.

Dashboard.tsx

TypeScript
import { Outlet, Link } from 'react-router-dom';
const Dashboard: React.FC = () => (
  <div>
    <h1>Dashboard</h1>
    <nav>
      <ul>
        <li>
          <Link to="profile">Profile</Link>
        </li>
        <li>
          <Link to="settings">Settings</Link>
        </li>
      </ul>
    </nav>
    <Outlet />
  </div>
);
export default Dashboard;

Profile.tsx and Settings.tsx

TypeScript
const Profile: React.FC = () => <h1>Profile Page</h1>;

export default Profile;

const Settings: React.FC = () => <h1>Settings Page</h1>;

export default Settings;

Update App.tsx

TypeScript
import Dashboard from './components/Dashboard';
import Profile from './components/Profile';
import Settings from './components/Settings';
<Routes>
  <Route path="/" element={<Home />} />
  <Route path="/about" element={<About />} />
  <Route path="/contact" element={<Contact />} />
  <Route path="/dashboard" element={<Dashboard />}>
    <Route path="profile" element={<Profile />} />
    <Route path="settings" element={<Settings />} />
  </Route>
</Routes>

Summary

This article covers setting up routing in a React application using TypeScript. It includes basic routing with React Router and demonstrates nested routes for complex navigation. The steps include creating components, setting up App.tsx, and enhancing navigation with active links and nested routes.