React中如何实现嵌套路由？让Navbar作为Dashboard与Properties的父组件

当然可以实现，React Router v6+ 完全支持嵌套路由，效果和你给出的Vue Router示例一致，但需要遵循React Router的语法规则。

你当前的写法存在问题：<Routes> 组件只能直接包含 <Route> 子元素，不能混合放置 <div>、<Navbar> 这类普通组件或元素，这样的代码不会生效。

正确实现步骤 #

1. 创建带Navbar的布局组件
   先写一个共用的布局组件，里面包含Navbar和React Router提供的<Outlet>（作用等同于Vue的<router-view>，用来渲染子路由内容）：

import { Outlet } from 'react-router-dom';

function LayoutWithNavbar() {
  return (
    <div>
      <Navbar />
      <div className="content-container">
        {/* 子路由组件会渲染在这个Outlet位置 */}
        <Outlet />
      </div>
    </div>
  );
}

2. 配置嵌套路由
   在路由规则中，把需要共用Navbar的页面作为布局组件的子路由：

import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';

function App() {
  return (
    <Router>
      <Routes>
        {/* 不需要Navbar的独立页面 */}
        <Route path="/" element={<Home />} />
        <Route path="/login" element={<Login />} />
        <Route path="/signup" element={<Signup />} />
        
        {/* 嵌套路由：父路由使用布局组件，子路由对应Dashboard和Properties */}
        <Route element={<LayoutWithNavbar />}>
          <Route path="/dashboard" element={<Dashboard />} />
          <Route path="/properties" element={<Properties />} />
        </Route>
      </Routes>
    </Router>
  );
}

补充：带基础路径的嵌套路由 #

如果希望Dashboard和Properties都放在某个基础路径下（比如/app），可以这样配置：

<Route path="/app" element={<LayoutWithNavbar />}>
  {/* 子路由路径不需要加斜杠，完整路径会自动拼接为/app/dashboard */}
  <Route path="dashboard" element={<Dashboard />} />
  <Route path="properties" element={<Properties />} />
</Route>

当访问/dashboard或/properties（或/app/dashboard这类带基础路径的地址）时，React Router会先渲染LayoutWithNavbar组件，然后在<Outlet>的位置渲染对应的子组件，完美实现你想要的嵌套路由效果。

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