React Router V6根路径自动跳转至不存在的/doc路径问题求助

根据你的描述和提供的代码，首先可以排除是React Router配置本身的问题——你的代码里没有任何与/doc相关的路由规则或重定向逻辑，AuthRoute也只有在isAuth为false时才会跳转到/login，而当前isAuth设为true，不会触发这个跳转。

出现本地环境和Codesandbox差异的问题，大概率是本地开发环境的配置或浏览器环境导致的，可以按以下步骤排查：

• 检查项目根目录下的.env文件，看看是否设置了PUBLIC_URL=/doc。Create React App会根据这个变量设置应用的基准路径，导致所有路由都自动加上/doc前缀。
• 打开public/index.html，查看是否存在<base href="/doc/">标签。这个标签会指定页面中所有相对URL的基准路径，直接影响路由跳转。
• 检查webpack配置（如果是自定义配置的话），确认output.publicPath有没有被设为/doc/，这也会导致路由路径被修改。
• 清空浏览器缓存，或者用无痕模式打开页面。有时候旧的缓存配置会导致异常路由跳转；另外，某些浏览器扩展（比如广告拦截、路由修改类插件）也可能干扰路由行为，可以尝试禁用所有扩展再测试。
• 检查本地开发服务器的配置，比如有没有设置路由fallback规则，把根路径重定向到了/doc。比如使用serve工具的话，有没有加特殊参数，或者自定义的服务器脚本里有没有相关重定向逻辑。

如果以上都排查完还是没找到问题，可以尝试重新安装依赖、删除node_modules和package-lock.json后重新构建项目，排除依赖缓存的问题。

你提供的项目代码： #

App.js

import logo from './logo.svg'
import './App.css'
import { Routes, Route } from 'react-router-dom'
import AuthLogin from './components/AuthLayout'
import AuthRoute from './components/AuthRoute'
import Login from './components/Login'

function App() {
  const state = {
    isAuth: true,
    name: 'state'
  }
  const client = 'Andrew'

  return (
    <Routes>
      <Route
        path='/'
        element={
          <AuthRoute props={state} >
            <AuthLogin client={client} />
          </AuthRoute>
        }
      />
      <Route path='login' element={<Login props={state} />} />
    </Routes>
  );
}

export default App;

Login.js

import React from 'react'

const Login = ({ props }) => {
  console.log(props)
  return (
    <div>
      <h1>Login</h1>
      <h1>Is Authorized: {props.isAuth.toString()}</h1>
    </div>
  )
}

export default Login

AuthLayout.js

import React from 'react'

const AuthLayout = ({ client }) => {
  return (
    <div>
      <h1>Auth Layout</h1>
      <h1>{client}</h1>
    </div>
  )
}

export default AuthLayout

AuthRoute.js

import React from 'react'
import { Navigate } from 'react-router-dom'
import Error from './Error'

const AuthRoute = ({ props, client, children }) => {
  if (!props.isAuth) {
    return <Navigate to='/login' replace />
  }
  return children
}

export default AuthRoute

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