React Vite项目如何使用react-router-dom实现页面路由跳转

引用块

1. 安装依赖 #

Vite 初始化的 React 项目默认不集成路由能力，先在项目根目录执行命令安装 react-router-dom，当前默认安装的 v6 版本是官方维护的稳定版：

# npm 安装
npm install react-router-dom
# yarn 安装
yarn add react-router-dom
# pnpm 安装
pnpm add react-router-dom

2. 注入路由上下文 #

路由能力需要全局生效，根据你选的配置方式调整入口文件 src/main.jsx 即可：

• 选集中式路由表配置（推荐中大型项目用），后续直接用路由表注入，不需要提前包裹 BrowserRouter
• 选组件内零散配置的方式，需要用 BrowserRouter 包裹根组件，示例代码：

import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App.jsx'
import { BrowserRouter } from 'react-router-dom'
import './index.css'

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

3. 配置路由映射规则 #

方式1：集中式路由表（推荐）

在 src 下新建 router/index.jsx，统一维护所有路径和页面组件的对应关系，后续扩展嵌套路由、路由守卫、懒加载都很方便：

import { createBrowserRouter } from 'react-router-dom'
// 导入自己写的业务页面组件
import Home from '../pages/Home'
import NextPage from '../pages/NextPage'
import UserPage from '../pages/User'
import NotFound from '../pages/NotFound'

const router = createBrowserRouter([
  {
    path: '/', // 首页路径
    element: <Home />
  },
  {
    path: '/next', // 下一页路径
    element: <NextPage />
  },
  {
    path: '/user/:userId', // 带动态参数的路径
    element: <UserPage />
  },
  {
    path: '*', // 兜底匹配所有不存在的路径，渲染404页
    element: <NotFound />
  }
])

export default router

写完后回到 src/main.jsx，替换成 RouterProvider 注入路由表即可：

import React from 'react'
import ReactDOM from 'react-dom/client'
import { RouterProvider } from 'react-router-dom'
import router from './router'
import './index.css'

ReactDOM.createRoot(document.getElementById('root')).render(
  <React.StrictMode>
    <RouterProvider router={router} />
  </React.StrictMode>,
)

方式2：组件内零散配置（适合小型项目）

不需要单独建路由文件，直接在 App.jsx 里用 Routes、Route 组件写映射关系：

import { Routes, Route } from 'react-router-dom'
import Home from './pages/Home'
import NextPage from './pages/NextPage'
import UserPage from './pages/User'
import NotFound from './pages/NotFound'

function App() {
  return (
    <div className="app-container">
      {/* 页面公共导航栏可以写在Routes外面，所有页面都会展示 */}
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/next" element={<NextPage />} />
        <Route path="/user/:userId" element={<UserPage />} />
        <Route path="*" element={<NotFound />} />
      </Routes>
    </div>
  )
}

export default App

4. 实现页面跳转 #

两种跳转方式覆盖所有业务场景：

• 声明式跳转：直接在 JSX 里写跳转入口，适合菜单、普通文字/图片跳转场景，不会触发页面整页刷新

  import { Link, NavLink } from 'react-router-dom'
  function Home() {
    return (
      <div>
        <h1>首页内容</h1>
        {/* 基础跳转：跳转到下一页 */}
        <Link to="/next">点击进入下一页</Link>
        {/* 带参数跳转：跳转到id为1001的用户页 */}
        <NavLink to="/user/1001">进入用户中心</NavLink>
      </div>
    )
  }
  

  NavLink 和 Link 能力一致，额外支持自动给当前匹配路径的导航项加激活样式，适合做顶部/侧边导航菜单。

• 编程式跳转：适合逻辑触发的跳转，比如表单提交成功、接口校验通过、倒计时结束后自动跳转的场景，用 useNavigate 钩子实现：

  import { useNavigate } from 'react-router-dom'
  function Home() {
    const navigate = useNavigate()
    const handleSubmit = () => {
      // 表单提交逻辑写完后跳转到下一页
      navigate('/next')
      // 携带额外参数跳转
      // navigate('/user/1001', { state: { from: 'homePage' } })
      // 浏览器历史回退
      // navigate(-1)
    }
    return (
      <div>
        <h1>首页内容</h1>
        <button onClick={handleSubmit}>提交并进入下一页</button>
      </div>
    )
  }
  

5. 接收跳转参数 #

如果跳转时带了参数，目标页面用两个钩子就能取到：

• 路径上的动态参数（比如 /user/:userId 里的 userId），用 useParams 取
• 跳转时通过 state 传递的隐式参数，用 useLocation 取

import { useParams, useLocation } from 'react-router-dom'
function UserPage() {
  const { userId } = useParams()
  const { state } = useLocation()
  return (
    <div>
      <p>当前用户ID：{userId}</p>
      <p>跳转来源：{state?.from || '未知'}</p>
    </div>
  )
}

内容的提问来源于stack exchange，提问作者Ijay