react router 6渲染的子级问题

我看到了其他帖子,但这些解决方案对我不起作用。我有一个基本的,但。。。不起作用

  <BrowserRouter>
    <Routes>
      <Route index element={<Main />} />
      <Route path='/main' element={<Main />} >
        <Route path="test" element={<Test />} />
        <Route path="*" element={<NotFound />} />
      </Route>
    </Routes>
  </BrowserRouter>

每个页面,/main,/main/test,/main/false所有呈现main

我还尝试删除此部件

<Route index element={<Main />} />

这部分呢

<Route path="*" element={<NotFound />} />

没有运气