React Router v6报错No routes matched location "/" 问题排查求助

问题根源 #

当前路由配置存在核心缺失：根路径/没有对应的路由规则。

• AppRouter仅配置了/auth/*和/journal两个路由分支，完全没覆盖根路径
• JournalRoutes作为/journal的子路由组件，其内部的path="/"实际匹配的是/journal/（子路由会继承父路由的路径前缀），并非根路径/

修复方案 #

方法1：添加根路径重定向（推荐） #

在AppRouter中新增根路由规则，将/重定向到/journal，同时导入Navigate组件实现跳转：

修改后的AppRouter.jsx：

import React from 'react'
import { Route, Routes, Navigate } from 'react-router-dom'
import {AuthRoutes} from "../auth/routes/AuthRoutes"
import { JournalRoutes } from '../journal/routes/JournalRoutes'

export const AppRouter = () => {
  return (
    <Routes>
        <Route path='/auth/*' element={<AuthRoutes/>}/>
        <Route path='/journal' element={<JournalRoutes/>}/>
        {/* 根路径自动跳转到journal页面 */}
        <Route path="/" element={<Navigate to="/journal" />} />
        {/* 捕获所有未匹配的路由，统一重定向 */}
        <Route path='*' element={<Navigate to="/" />} />
    </Routes>
  )
}

方法2：直接为根路径配置JournalRoutes #

如果希望根路径直接渲染JournalRoutes的内容，可调整AppRouter的路由结构，同时简化JournalRoutes的子路由配置：

修改后的AppRouter.jsx：

import React from 'react'
import { Route, Routes } from 'react-router-dom'
import {AuthRoutes} from "../auth/routes/AuthRoutes"
import { JournalRoutes } from '../journal/routes/JournalRoutes'

export const AppRouter = () => {
  return (
    <Routes>
        <Route path='/auth/*' element={<AuthRoutes/>}/>
        {/* 同时匹配根路径和/journal路径 */}
        <Route path='/' element={<JournalRoutes/>}/>
        <Route path='/journal/*' element={<JournalRoutes/>}/>
    </Routes>
  )
}

修改后的JournalRoutes.jsx：

import React from 'react'
import { Route, Routes } from 'react-router-dom'
import { JournalPage } from '../pages/JournalPage'

export const JournalRoutes = () => {
  return (
   <Routes>
    {/* 使用index表示父路由的默认页面，无需写path="/" */}
    <Route index element={<JournalPage/>}/>
    <Route path='*' element={<JournalPage/>}/>
   </Routes>
  )
}

额外说明 #

• React Router v6中，子路由的路径会自动拼接父路由的前缀，子路由用index即可表示父路由的默认页面
• path="*"用于捕获所有未匹配的路由，通常用来显示404页面或统一重定向

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