重定向

1. 实例 1

   import React from "react";
   import { Link, Route, Routes, Navigate } from "react-router-dom";
   // 路由组件
   import Home from "./pages/Home";
   import About from "./pages/About";

   export default function App() {
     return (
       <div>
         <h2>React Router Demo</h2>
         <div>
           <div>
             {/* 在React中靠路由链接实现切换组件--编写路由链接 */}
             <Link to="/home">Home</Link>
             <Link to="/about">About</Link>
           </div>
           <div>
             <Routes>
               {/* 注册路由 */}
               <Route path="/home" element={<Home />} />
               <Route path="/about" element={<About />} />
               {/* 重定向Home */}
               <Route path="/" element={<Navigate to="/home" />} />
             </Routes>
           </div>
         </div>
       </div>
     );
   }

1. 实例 2

   import React, { useState } from "react";
   import { Navigate } from "react-router-dom";

   export default function Home() {
     const [sum, setSum] = useState(0);

     const addSum = () => {
       setSum(sum + 1);
     };

     return (
       <div>
         <h3>我是home的内容</h3>
         {/* replace, 默认是false,push模式 */}
         {sum === 3 ? <Navigate to="/about" replace={true} /> : <p>{sum}</p>}
         <button onClick={addSum}>点击变成2</button>
       </div>
     );
   }