react 路由基础的设置以及跳转

最新推荐文章于 2024-06-23 17:35:45 发布

前端小白白啦

最新推荐文章于 2024-06-23 17:35:45 发布

阅读量134

点赞数

文章标签： react.js javascript 前端

本文链接：https://blog.csdn.net/m0_61469275/article/details/129466351

版权

该文章展示了如何在React应用中使用`react-router-dom`库进行路由导航，包括编程式导航和使用Link组件。同时，它还演示了Route组件的用法，以及如何结合antd库的Button组件来创建导航按钮。

摘要由CSDN通过智能技术生成

import React from 'react'
// 导入 Routes， Route
import { Link, Route, Routes, useNavigate, Navigate } from 'react-router-dom'
import { Button } from 'antd'
import './App.css'
import Fffff from './haha'
import R1 from './r1'
import R2 from './r2'

function App() {
  const toPage = useNavigate()
  // 编程式导航
  const topage = (i: number) => {
    if (i === 1) {
      toPage('/')
    } else {
      toPage('/r2')
    }
  }

  return (
    <div className="App">
      <Button
        type="primary"
        onClick={() => {
          topage(1)
        }}
      >
        Navigater1
      </Button>
      <Button
        type="primary"
        onClick={() => {
          topage(2)
        }}
      >
        Navigater2
      </Button>
      {/* link导航 */}
      <Link to="/">
        <Button type="primary">r1</Button>
      </Link>
      <Link to="/aaa">
        <Button type="primary">r2</Button>
      </Link>
      <Fffff />
      {/* link导航 
      props:
      path 路由地址
      elelment 跳转的目标地址
      Navigate 直接跳转类似重定向
      */}
      <Routes>
        <Route path="/" element={<R1 />}></Route>
        <Route path="/r2" element={<R2 />}></Route>
        <Route path="/aaa" element={<Navigate to="/r2" />}></Route>
      </Routes>
    </div>
  )
}

export default App