React-router 使用

最新推荐文章于 2024-11-09 18:32:26 发布

eat老虎滴兔兔

最新推荐文章于 2024-11-09 18:32:26 发布

阅读量146

点赞数

文章标签： react.js javascript 前端

本文链接：https://blog.csdn.net/clhdtzhh/article/details/130225838

版权

该文章展示了如何配置React应用的路由，包括导入组件，设置默认路由，使用`useRoutes`处理路由，以及在`BrowserRouter`中包裹应用以实现导航功能。同时，文中还涉及到状态管理，使用`useState`来管理状态，并提供了链接组件`Link`的使用示例。

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

写路由配置文件

import About from "@/views/about"
import Home from "@/views/home"
// 默认路由重定向
import { Navigate } from "react-router-dom"

const routes = [
  {
    path: "/",
    element: <Navigate to="/home" /> 
  },
  {
    path: "/home",
    element: <Home /> 
  },
  {
    path: "/about",
    element: <About /> 
  },
]

export default routes

在顶级组件中引入路由配置，然后使用 react-router-dom 中的 useRoutes 将配置项传进去，通过 {outlet} 形式进行路由展位

  import { useState } from 'react'
  import { Button } from 'antd'
  // import 'antd/dist/antd.css'

  import { useRoutes, Link } from 'react-router-dom'
  import router from './router'

  function App() {
    const [count, setCount] = useState(0)
    const outlet = useRoutes(router)

    return (
      <div className="App">
        {/* <Button>按钮</Button> */}
        <Link to="/home">home</Link>
        <Link to="/about">about</Link>
        {outlet}
      </div>
    )
  }

  export default App

在mian.tsx中使用BrowserRouter进行包裹

import React from 'react'
import ReactDOM from 'react-dom/client'
// 样式初始化
import 'reset-css'
// UI框架样式

// 全局样式
import '@/assets/styles/global.scss'

// 组件样式
import App from './App'
import { BrowserRouter } from 'react-router-dom'

ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
  <React.StrictMode>
    <BrowserRouter>
      <App />
    </BrowserRouter>
  </React.StrictMode>,
)