在現(xiàn)代Web開發(fā)中，路由已經(jīng)成為了一個(gè)非常重要的概念，它允許我們根據(jù)不同的URL來展示不同的內(nèi)容，從而實(shí)現(xiàn)頁面之間的跳轉(zhuǎn)和數(shù)據(jù)傳遞，在TypeScript中，我們可以使用一些第三方庫來實(shí)現(xiàn)路由功能，如React Router、Vue Router等，本文將以React Router為例，詳細(xì)介紹如何在TypeScript項(xiàng)目中應(yīng)用路由。

創(chuàng)新互聯(lián)建站主營(yíng)江西網(wǎng)站建設(shè)的網(wǎng)絡(luò)公司,主營(yíng)網(wǎng)站建設(shè)方案,重慶APP開發(fā),江西h5微信小程序開發(fā)搭建,江西網(wǎng)站營(yíng)銷推廣歡迎江西等地區(qū)企業(yè)咨詢

1、安裝React Router

我們需要安裝React Router庫，在項(xiàng)目根目錄下，運(yùn)行以下命令：

npm install reactrouterdom

2、創(chuàng)建路由組件

接下來，我們需要?jiǎng)?chuàng)建一些路由組件，我們可以創(chuàng)建一個(gè)首頁組件（Home.tsx）、一個(gè)關(guān)于頁面組件（About.tsx）和一個(gè)聯(lián)系人頁面組件（Contact.tsx），這些組件將作為我們的路由路徑。

3、配置路由

在項(xiàng)目的入口文件（如：App.tsx）中，我們需要配置路由，導(dǎo)入所需的庫和組件：

import React from 'react';
import { BrowserRouter as Router, Route, Switch } from 'reactrouterdom';
import Home from './components/Home';
import About from './components/About';
import Contact from './components/Contact';

使用Router組件包裹整個(gè)應(yīng)用，并設(shè)置basename屬性，接著，使用Switch組件包裹所有的Route組件，以便在當(dāng)前匹配的路由渲染時(shí)停止渲染其他路由，使用Route組件定義各個(gè)路由路徑及其對(duì)應(yīng)的組件：

function App() {
  return (
    
      
        
        
        
      
    
  );
}

4、添加鏈接和導(dǎo)航欄

為了讓用戶能夠方便地訪問各個(gè)頁面，我們需要在應(yīng)用中添加一些鏈接和導(dǎo)航欄，在首頁組件（Home.tsx）中，我們可以添加如下代碼：

import React from 'react';
import { Link } from 'reactrouterdom';
function Home() {
  return (
    

      
首頁
      
    
  );
}

同樣，在其他頁面組件中，我們也可以添加類似的鏈接和導(dǎo)航欄，這樣，用戶就可以通過點(diǎn)擊鏈接或?qū)Ш綑趤碓L問不同的頁面了。

5、傳遞參數(shù)和查詢參數(shù)

在React Router中，我們還可以通過URL傳遞參數(shù)和查詢參數(shù)，我們可以為聯(lián)系人頁面添加一個(gè)ID參數(shù)：

在聯(lián)系人頁面組件（Contact.tsx）中，我們可以使用useParams鉤子來獲取參數(shù)：

import React, { useParams } from 'react';
import { Link } from 'reactrouterdom';
function Contact() {
  const { id } = useParams(); // 獲取參數(shù)id的值
  return (
    

      
聯(lián)系人 ID: {id}
      
    
  );
}

我們還可以使用查詢參數(shù)來傳遞一些額外的信息，我們可以為聯(lián)系人頁面添加一個(gè)名為name的查詢參數(shù)：/contact?name=張三，在聯(lián)系人頁面組件中，我們可以使用useLocation鉤子來獲取查詢參數(shù)：

import React, { useParams, useLocation } from 'react';
import { Link } from 'reactrouterdom';
import qs from 'querystring'; // 引入querystring庫以解析查詢參數(shù)字符串為對(duì)象形式的數(shù)據(jù)結(jié)構(gòu)，如果沒有安裝該庫，請(qǐng)先運(yùn)行npm install querystring命令進(jìn)行安裝。

當(dāng)前名稱：TypeScript中對(duì)于路由的應(yīng)用
瀏覽路徑：http://m.fisionsoft.com.cn/article/ccciigp.html