React路由组合路由问题求助：/child路径无法访问

你的代码问题主要出在嵌套路由的实现方式上，React Router v6里不能直接在普通组件内部写<Route>，嵌套路由需要用到Outlet组件做占位符，同时路由结构要正确嵌套。

问题点分析 #

• <Route>组件必须放在<Routes>内部，或者作为其他<Route>的children，直接在组件里写<Route>不会生效。
• 要实现父组件包裹子路由内容，需要用Outlet指定子路由的渲染位置。

修改后的代码 #

import React from 'react';
import ReactDOM from 'react-dom/client';
import { BrowserRouter, Routes, Route, Outlet } from 'react-router-dom' // 新增Outlet导入

function Home() {
  return <h1>its home</h1>
}

function Child() {
  return <h1>its child</h1>
}

function Wrapper() {
  return( 
    <div>
      <h1>trial</h1>
      {/* 用Outlet代替原来的Route，作为子路由的占位符 */}
      <Outlet />
    </div>
  )
}

function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/home" element={<Home />} />
        {/* 将Wrapper作为父路由，设置path，子Route嵌套在里面 */}
        <Route path="/" element={<Wrapper />}>
          {/* 子路由用相对路径，匹配/child */}
          <Route path="child" element={<Child />} />
        </Route>
      </Routes>
    </BrowserRouter>
  )
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <App />
);

关键改动说明 #

1. 导入Outlet：从react-router-dom引入Outlet，它是嵌套路由的核心，用来标记子路由内容的渲染位置。
2. 改造Wrapper组件：把原来的<Route>替换成<Outlet />，访问子路由时，Child组件会自动渲染在这个位置。
3. 调整路由结构：给Wrapper对应的Route设置path="/"，然后把Child的Route作为它的子元素，这样/child就能匹配嵌套路由，同时渲染Wrapper和Child的内容。

现在访问/会显示Wrapper的内容，访问/child会显示Wrapper+Child的内容，/home也能正常访问。

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