三、【React-Router6】重定向 Navigate

• 有经验的小伙伴此时都会看到控制台的一份警告，加上"/"的重定向即可去掉这个警告

• 这里需要注意的变化
  • <Redirect> 变成了 <Navigate> 且写法改变
    • <Route path='/' element={<Navigate to={path} />} />
  • <Navigate> 还可以挂一个属性 replace

项目修改自 上一节 的 Demo

3.1、Navigate 基本使用

• CODE（App.js）

import { Navigate } from 'react-router-dom'
// 其余不变，略...
<Routes>
    <Route path='/about' element={<About />} />
    <Route path='/home' element={<Home />} />
    <Route path='/' element={<Navigate to='/about' />} />
</Routes>

• Result

3.2、Navigate 的其他用法

• CODE（Home.jsx）

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

export default function Home() {
    const [sum, setSum] = useState(0)
    return (
        <>
            <h3>我是Home的内容(和为3时自动跳到About)</h3>
            {
                sum === 3 ? <Navigate to='/about' replace /> : <h4>当前和为：{sum}</h4>
            }
            <button onClick={() => setSum(sum + 1)}>点我+1</button>
        </>
    )
}

• Result