React Router

React 路由

• react: 18.3.1
• react-router-dom: 6.25.1
• vite: 5.3.4
• typescript: 5.2.2

路由组件

<Route /> 路由目标组件 需与 <Routes /> 组合使用

• 适用场景： 路由页面较少

<Routes>
  <Route path="/" element={<Index />} />
  <Route path="/login" element={<Login />} />
  <Route path="*" element={<Navigate to="/login" />} />
</Routes>

Navigate 组件渲染时会重定向路由

<Outlet /> 组件

使用场景：将需要大量<Route /> 时

• 通过与 hook 方法 useRoutes(routes) 组合使用 将返回一个 <Routes /> 组件对象 挂载到 组件中，并使用<Outlet /> 在指定位置渲染页面组件

<Link />

将会渲染一个 <a> 点击后会跳转到对应的路由

<NavLink />

将会渲染一个 <a> 点击后会跳转到对应的路由, 并且当前路由与指定路由相同时会给 <a> 加上一个默认类名 class="active"，

// 重写激活类名 { isActive, isPending, isTransitioning}
<NavLink 
    to='/' 
    className={
        ({ isActive, isPending}) => isPending ? "pending" : isActive ? "is-active" : ""
    }>
    to home
</NavLink>

1. 创建 路由文件

路径 src/router/index.tsx

// import ... from '@/pages/...'
// ...
export default [{
  path: '/login',
  element: <Login />,
}, {
  path: '/',
  element: <Navigate to='/login' />,
}]

2. 引入路由

路径 main.tsx

import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App.tsx' // react 根节点组件
import './index.css' //  全局样式
import { BrowserRouter } from 'react-router-dom'

const root = ReactDOM.createRoot(document.getElementById('root')!)

root.render(
  <React.StrictMode>
    <BrowserRouter>
      <App />
    </BrowserRouter>
  </React.StrictMode>,
)

3. 渲染路由组件

路径 App.tsx

import routes from '@/router/index'
import { Outlet } from 'react-router-dom'

function App() {
  const route = useRoutes(routes)

  return (
    <>
      {route}
      <Outlet />
    </>
  )
}

export default App

4. 实现路由 page

在 路径 src/pages/ 创建 Login.tsx 和 Index.tsx，表示 登录页 和 首页