React Router v6 学习笔记02

1、Navigate路由跳转与重定向

函数组件中使用：useNavigate()

返回一个函数A，该函数A可用于页面跳转

函数A有两个参数

参数1：字符串：目标路由地址

参数2：状态对象，其格式必须为{ state: ‘传递的信息’ } 配合useLocation在页面跳转时传递信息

//当前页面
import { useNavigate,useLocation } from 'react-router-dom'
export default function Login() {
    const navigate=useNavigate ()
    const login=()=>{
        navigate('/',{ state: 123 })
    }
  return ( <button onClick={login}>登录</button> )
}
//目标页面路由地址为“/”
import {useLocation } from 'react-router-dom'
export default function Layout() {
    const location =useLocation()
    console.log(location.state);//123
    const result=useOutlet()
  return (。。。)
}

类组件中使用：

export default class Login extends React.Component {
    state=({login:false})
    render() {
        return (<>
            <button onClick={() => { this.setState({ login: true }) }}>Navigate登录</button>
            {this.state.login && (<Navigate to='/' state={123}>登录</Navigate>)}
             </>)
    }
}

navigate实现重定向

//空页面定位到主页
 <Routes>
        <Route  path="/home" element={lazyLoad(<Home/>)}/>
        <Route path="/" element={<Navigate replace to="/home"/>}/>
 </Routes>

2、Link标签实现路由传参

//1、路由声明 ，在path使用：来声明参数的的名称（ path='/user/detail/:参数名'）
export default class App extends Component {render() { return (
      <BrowserRouter >
        <Routes>
            <Route path='/user' element={<User/>}/>
            <Route path='/user/detail/:id' element={<UserDetail/>}/>?
        </Routes>
      </BrowserRouter>
)}}
//2、使用Link标签跳转时，传递参数（to='/user/detail/参数）
import { Link } from 'react-router-dom'
export default function User() { return (
    <div>
    <p><Link to='/user/detail/1'>用户1</Link></p>
    <p><Link to='/user/detail/2'>用户2</Link></p>
    <p><Link to='/user/detail/3'>用户3</Link></p>
    </div>
)}
//3、在目标页面使用useParams接收参数
import { useParams } from 'react-router-dom'
export default function UserDetail() {
  const  params=useParams()
  console.log(params）//{id:参数}
  return (
    <div> user detail -{params.id} </div>
  )
}