vocode使用react，嵌套路由问题

vocode使用react，请问如何实现以下功能：
1、chrome浏览器地址栏输入http://localhost:3000/home或点击页面里的“首页”后，下方显示”首页“二字，如下图：

2、chrome浏览器地址栏输入http://localhost:3000/home/news后，下方显示”首页“以及”这是News组件的内容,它是子路由的内容“，如下图：

3、当地址栏删除/news后（即地址改为http://localhost:3000/home），下方显示”首页“二字，不再显示”这是News组件的内容,它是子路由的内容“，如下图：

路由配置怎么写的

// Home/index.jsx
<Routes>
  <Route path='/home' element={<Home />} >
    <Route path='news' element={<News />}></Route>
  </Route>

  <Route path='/citylist' element={<CityList />}></Route>
</Routes>

嵌套路由使用Routes/Route时，直接在父路由里注册路由即可。