使用 TypeScript 在 React JS 中进行路由

一.介绍

单页应用程序 (SPA) 中的路由支持在视图之间导航，而无需重新加载应用程序。React Router 是 React 应用程序中路由的标准库。本文简要概述了使用 TypeScript 设置路由的方法。

二.设置项目

1. 创建一个新的 React 项目

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

2. 导航到项目目录

cd react-router-ts

3. 安装 React Router

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

三.基本路由设置

1.创建组件

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;

在 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;

在 index.tsx 中渲染 App 组件

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

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

root.render(<App />);

2.增强导航

突出显示活动链接。

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>

添加嵌套路线。

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 和 Settings.tsx

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

export default Profile;

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

export default Settings;

更新 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>

四.概括

本文介绍如何使用 TypeScript 在 React 应用程序中设置路由。它包括使用 React Router 进行基本路由，并演示了复杂导航的嵌套路由。步骤包括创建组件、设置 App.tsx 以及使用活动链接和嵌套路由增强导航。