如何在React JSX中为单个<Route />路由按条件传入两个组件

算力阿峰

2026-9-28

React 单Route条件渲染不同组件标准实现方案

以下方案区分React Router的主流版本，都是官方推荐的标准写法：

React Router v6（当前主流版本）

v6的<Route>组件的element属性直接接收JSX表达式，直接在属性中写三元判断即可，无需额外封装：

基础场景（判断逻辑简单）
示例：根据登录状态决定渲染后台页还是登录页

import { Route } from 'react-router-dom'
import Admin from './Admin'
import Login from './Login'

// 你的预设判断条件，比如从全局状态、localStorage获取的登录标识
const isLogin = Boolean(localStorage.getItem('token'))

<Route 
  path="/dashboard" 
  element={isLogin ? <Admin /> : <Login />} 
/>

复杂判断场景（多条件分支）
把渲染逻辑抽成独立函数，提高代码可读性：

import { useAuth } from '@/hooks/useAuth'

const DashboardRoute = () => {
  const { isLogin, role } = useAuth()
  if (isLogin && role === 'admin') return <Admin />
  if (isLogin && role === 'editor') return <EditorPanel />
  return <Login />
}

// 路由处直接传入组件即可
<Route path="/dashboard" element={<DashboardRoute />} />

注意：JSX中不支持直接写if语句，所以复杂逻辑一定要抽离到外部函数/组件。

React Router v5 及更早版本

v5的<Route>支持render属性做条件渲染，比直接用component属性性能更好，不会触发不必要的组件卸载重渲染：

import { Route } from 'react-router-dom'

<Route
  path="/dashboard"
  render={(routeProps) => {
    // routeProps包含match、history、location等路由原生属性，记得透传
    return isLogin ? <Admin {...routeProps} /> : <Login {...routeProps} />
  }}
/>