Post
Ask Question

Routing in React JS with TypeScript

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

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

2. Navigate to the project directory

cd react-router-ts

3. Install React Router

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

Basic Routing Setup
 

Create components

Home.tsx

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

export default Home;

About.tsx

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

export default About;

Contact.tsx

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

export default Contact;

Set up routing in App.tsx

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

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.

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

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

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

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.


Similar Articles