React嵌套路由报错No routes matched，求正确实现方案

问题原因 #

你当前的嵌套路由写法不正确。顶层路由仅配置了/对应Main组件，但/animal这类路径在顶层路由中无匹配项，跳转时Router无法找到对应规则，因此报错。同时Main组件内的独立Routes无法与顶层路由形成嵌套关联，这不符合React Router嵌套路由的标准用法。

正确配置方式（推荐） #

React Router的嵌套路由需通过父路由嵌套子路由 + Outlet承载子内容的方式实现：

1. 修改顶层路由（HomePage） #

将Main对应的路由改为嵌套结构，把子路由定义在父路由的children中：

import { BrowserRouter, Routes, Route } from 'react-router-dom';
import Main from './Main';
import Login from './Login';
import Register from './Register';
import HomePageFeed from './HomePageFeed';
import AnimalSelection from './AnimalSelection';
import Animal from './Animal';

const HomePage = () => {
    return (
        <BrowserRouter>
            <Routes>
                {/* 父路由：匹配根路径，渲染Main组件 */}
                <Route path="/" element={<Main/>}>
                    {/* index路由：父路径匹配但无子路径时，渲染HomePageFeed */}
                    <Route index element={<HomePageFeed/>} />
                    {/* 子路由：相对路径，最终匹配/animal */}
                    <Route path="animal" element={<AnimalSelection/>} />
                    {/* 动态参数子路由：匹配/animal/xxx */}
                    <Route path="animal/:id" element={<Animal/>} />
                </Route>
                {/* 其他顶层路由 */}
                <Route path="/login" element={<Login/>} />
                <Route path="/register" element={<Register/>} />
            </Routes>
        </BrowserRouter>
    )
};

export default HomePage;

2. 修改Main组件 #

引入Outlet组件，作为父路由下子路由内容的占位符：

import { Outlet } from 'react-router-dom';
import HomePageHeader from './HomePageHeader';

const Main = () => {
    return (
        <div className="app">
            <HomePageHeader/>
            {/* Outlet自动渲染当前匹配的子路由组件 */}
            <Outlet />
        </div>
    )
}

export default Main;

关键说明 #

• index路由：当父路由路径（/）完全匹配但无额外子路径时，渲染对应组件（HomePageFeed），替代原根路径子路由写法。
• 子路由路径：使用相对路径（如animal而非/animal），会自动拼接父路由路径形成完整路径（/animal）。
• Outlet：父路由组件的核心占位符，负责渲染匹配到的子路由组件，是实现嵌套路由的必要元素。

修改完成后，调用navigate("/animal")即可正确匹配路由并渲染AnimalSelection组件。

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