react+ts高级路由

React结合TypeScript使用高级路由时，通常会使用React Router库的最新版本，因为React Router从版本4开始就提供了很好的模块化路由配置，支持动态路由匹配、路由懒加载等功能，并且与TypeScript很好地集成。

在使用React+TS开发应用时，你可以通过安装`react-router-dom`包来实现网页的导航和页面间的切换。以下是一些基本的步骤和概念：

1. 安装必要的库：

   npm install react-router-dom

2. 创建路由配置，通常会创建一个`<BrowserRouter>`作为路由的最外层容器，并在其中使用`<Routes>`和`<Route>`组件来定义路由路径和对应的组件。

   import { BrowserRouter, Routes, Route } from 'react-router-dom';
   import { Home, About, Contact } from './pages'; // 假设你有这些页面组件

   const App = () => {
     return (
       <BrowserRouter>
         <Routes>
           <Route path="/" element={<Home />} />
           <Route path="/about" element={<About />} />
           <Route path="/contact" element={<Contact />} />
           {/* 使用通配符 '*' 来捕获所有未匹配的路径 */}
           <Route path="*" element={<NoMatch />} />
         </Routes>
       </BrowserRouter>
     );
   };

3. 使用`useNavigate`或`Link`来进行编程式或声明式的导航。`useNavigate`是一个钩子函数，用于在React组件中进行路由导航，而`Link`组件用于创建导航链接。

   // 使用useNavigate钩子进行编程式导航
   import { useNavigate } from 'react-router-dom';

   const SomeComponent = () => {
     let navigate = useNavigate();

     const handleClick = () => {
       navigate('/about');
     };

     return <button onClick={handleClick}>Go to About</button>;
   };

   // 使用Link进行声明式导航
   import { Link } from 'react-router-dom';

   const SomeComponent = () => {
     return <Link to="/about">About</Link>;
   };

4. 可以使用`<Outlet>`来渲染子路由的内容。

   // 假设你有子路由路径"/about/team"
   <Route path="/about" element={<About />}>
     <Route path="team" element={<Team />} />
   </Route>

在`About`组件中，你需要包含`<Outlet>`来渲染子路由内容：

   import { Outlet } from 'react-router-dom';

   const About = () => {
     return (
       <div>
         <h2>About Page</h2>
         <Outlet /> {/* 子路由内容将在这里渲染 */}
       </div>
     );
   };

5. 配置路由守卫，React Router提供了`<Navigate>`组件和`useNavigate`钩子，可以用来重定向用户。