React-Router中<Navigate/>未登录直接跳转首页且首页空白问题求助

核心问题1：多BrowserRouter导致路由上下文冲突 #

你在App.js里用了两个独立的BrowserRouter，这会让登录页和首页处于不同的路由上下文环境中。当从Login通过Navigate跳转到/home时，第二个BrowserRouter无法正确识别路由状态，导致首页空白，刷新后浏览器重新加载路由上下文才正常显示。

核心问题2：Redirect组件已被废弃 #

react-router-dom v6 完全移除了Redirect组件，替代方案是使用<Navigate to="/home" replace />（replace属性可以避免在历史记录中留下登录页的记录，和原Redirect行为一致）。

修复步骤 #

1. 合并App.js中的路由结构 #

将两个BrowserRouter合并为一个，所有路由放在同一个Routes下：

import React, { useEffect } from "react";
import Login from "./components/Login";
import { BrowserRouter, Routes, Route } from "react-router-dom";
import Home from "./components/Home";
import Header from "./components/Header";
import { getUserAuth } from "./actions";
import { connect } from "react-redux";

function App(props) {
  useEffect(() => {
    props.getUserAuth();
  }, []); 

  return (
    <div className="App">
      <BrowserRouter>
        <Routes>
          <Route path="/" element={<Login />} />
          <Route path="/home" element={<Home />} />
        </Routes>
      </BrowserRouter>
    </div>
  );
}

// 修正拼写错误：mapStateToPorps → mapStateToProps
const mapStateToProps = (state) => {
  return {};
};

const mapDispatchToProps = (dispatch) => ({
  getUserAuth: () => dispatch(getUserAuth()),
});

export default connect(mapStateToProps, mapDispatchToProps)(App);

2. 优化Login组件的跳转逻辑 #

保留Navigate组件，建议添加replace属性优化路由历史行为，同时确保只有在用户已登录且登录页无需显示时才跳转：

import styled from "styled-components";
import React from "react";
import { connect } from "react-redux";
import { signInAPI } from "../actions";
import { Navigate } from "react-router";

const Login = (props) => {
  // 如果用户已登录，直接跳转首页，replace替换当前路由记录
  if (props.user) {
    return <Navigate to="/home" replace />;
  }

  return (
    <Container>
      <Nav>
        //other stuff
      </Nav>
      <Section>
        //other stuff
      </Section>
    </Container>
  );
};

//styling code

const mapStateToProps = (state) => {
  return {
    user: state.userState.user,
  };
};

const mapDispatchToProps = (dispatch) => ({
  signIn: () => dispatch(signInAPI()),
});

export default connect(mapStateToProps, mapDispatchToProps)(Login);

3. 关于登录状态判断的优化建议 #

可以把登录态判断逻辑移到路由层面，使用嵌套路由或路由守卫组件，让路由结构更清晰：

// 示例：创建PrivateRoute组件
import { Navigate, Outlet } from "react-router-dom";
import { connect } from "react-redux";

const PrivateRoute = ({ user }) => {
  return user ? <Outlet /> : <Navigate to="/" />;
};

const mapStateToProps = (state) => ({
  user: state.userState.user,
});

export default connect(mapStateToProps)(PrivateRoute);

// 在App.js中使用
<BrowserRouter>
  <Routes>
    <Route path="/" element={<Login />} />
    <Route element={<PrivateRoute />}>
      <Route path="/home" element={<Home />} />
      // 其他需要登录的页面都可以放在这里
    </Route>
  </Routes>
</BrowserRouter>

这样可以避免在Login组件里处理跳转逻辑，同时统一管理所有需要登录权限的页面。

内容的提问来源于stack exchange，提问作者him.himanshu