React路由无内容返回？如何正确实现组件内条件路由跳转逻辑

你当前实现的核心问题是 Route 组件必须在路由容器（v5 版本为 Switch、v6 版本为 Routes）内部作为直接子组件使用，不能在普通业务组件内随意声明，因此你写的路由规则不会生效，也无法渲染Login组件。

React Router v6 实现方案 #

现在主流项目使用的版本，Navigate 组件为v6专属，如果你调用该组件报错先确认依赖版本为v6：

1. 单页面简单鉴权（直接在ShoppingList组件内判断）

import { Navigate } from 'react-router-dom';
import { UserContext } from '../UserContext';
import React, { useContext } from 'react'

function ShoppingList() {
  const  { user }  = useContext(UserContext);
  // 已登录返回正常页面内容
  if (user) {
    return (
      {/* 替换为你的ShoppingList实际业务代码 */}
      <div>购物列表内容</div>
    );
  }
  // 未登录直接重定向到登录页，replace属性避免登录后回退回到该页面
  return <Navigate to="/login" replace />
}
export default ShoppingList;

2. 提前在根路由配置中声明登录页路由：

import { Routes, Route } from 'react-router-dom';
import Login from './Login';
import ShoppingList from './ShoppingList';

function App() {
  return (
    <Routes>
      <Route path="/login" element={<Login />} />
      <Route path="/shopping-list" element={<ShoppingList />} />
      {/* 其他路由 */}
    </Routes>
  )
}

3. 通用私有路由封装（多页面鉴权推荐）
   如果多个页面都需要登录校验，可以封装统一的私有路由组件，避免重复写判断逻辑：

// PrivateRoute.jsx
import { Navigate, Outlet } from 'react-router-dom';
import { useContext } from 'react';
import { UserContext } from '../UserContext';

export default function PrivateRoute() {
  const { user } = useContext(UserContext);
  // 已登录渲染子路由内容，未登录跳转登录页
  return user ? <Outlet /> : <Navigate to="/login" replace />
}

路由配置修改为：

<Routes>
  <Route path="/login" element={<Login />} />
  {/* 所有需要登录的路由都作为PrivateRoute的子路由 */}
  <Route element={<PrivateRoute />}>
    <Route path="/shopping-list" element={<ShoppingList />} />
    <Route path="/profile" element={<UserProfile />} />
  </Route>
</Routes>

React Router v5 实现方案 #

如果你的项目使用v5版本，不存在Navigate组件，使用Redirect做重定向：

1. 单页面鉴权写法：

import { Redirect } from 'react-router-dom';
import { UserContext } from '../UserContext';
import React, { useContext } from 'react'

function ShoppingList() {
  const  { user }  = useContext(UserContext);
  if (user) {
    return (
      <div>购物列表内容</div>
    );
  }
  return <Redirect to="/login" />
}
export default ShoppingList;

2. 根路由配置：

import { Switch, Route } from 'react-router-dom';
import Login from './Login';
import ShoppingList from './ShoppingList';

function App() {
  return (
    <Switch>
      <Route path="/login" component={Login} />
      <Route path="/shopping-list" component={ShoppingList} />
    </Switch>
  )
}

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