React RouterDom 不适用于出口和子路线

Question

我有以下路线配置

export function App() {

  return (
    <>
        <PrimeReactProvider>
            <BrowserRouter>
                <Routes>
                  <Route path="/login" element={<LoginPage />}/>
                  <Route path="/painel" element={<Painel/>}/>
                     <Route path="dashboard" element={<DashBoard/>}/>
                  <Route/>
                </Routes>
            </BrowserRouter>
        </PrimeReactProvider>
    </>
  )
}

在 Painel 组件内我有：

export const Painel = ()=>{
    return(
        <div>
            <PainelMenu/>
            <Outlet/>
        </div>
    )
}

问题是访问 /painel/dashboard 时不显示内容。我尝试过的：

• 将 /painel 切换到 /painel/

• 将 /painel 切换到 /painel/*

• 将 path="dashboard" 切换到 path="/painel/dashboard" 它渲染了 组件但不是组件

• 删除浏览器路由器

我按照文档使用时没有发现任何错误

https://reactrouter.com/en/main/components/outlet

Answer 1

你的斜线位置不正确。 而不是：

<Route path="/painel" element={<Painel/>}/>
    <Route path="dashboard" element={<DashBoard/>}/>
<Route/>

试试这个：

<Route path="/painel" element={<Painel/>}>
    <Route path="dashboard" element={<DashBoard/>}/>
</Route>