重定向

实例 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>
  );
}

实例 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>
  );
}