请将父级 <Route path="/"> 更改为 <Route path="*">

Question

我在 React 应用程序中收到此警告：

You rendered descendant <Routes (or called `useRoutes()`) at "/" (under <Route path="/">) 
but the parent route path has no trailing "*". This means if you navigate deeper, 
the parent won't match anymore and therefore the child routes will never render.

Please change the parent <Route path="/"> to <Route path="*">.

这是我的代码：

<Router>
        <Routes>
            <Route exact path="/login" element={<Login />} />

            <Route exact path="/" element={<AppBody />} >
              <Route exact path="/add-edit-profile" element={<PageContent />} />
              <Route exact path="/profile-list" element={<ProfileList />} />
              
            </Route>
        </Routes>
    </Router>

AppBody.js：

                <Sidebar/>
                <div className='page-content'>
                    <Header />
                </div>
                
                <Routes>
                    <Route exact path="/add-edit-profile" element={<PageContent />} />
                    <Route exact path="/profile-list" element={<ProfileList />} />
                    
                </Routes>
                

我必须在代码中更改哪些内容才能修复警告？

Answer 1

这意味着AppBody正在渲染更深层的嵌套路由，并且路径需要指定通配符*以指示它可以匹配更通用/嵌套的路径。react-router-dom路由路径始终完全匹配，因此如果渲染子路由，则路径需要允许它们。改成。path="/"​path="/*"

由于AppBody正在渲染路由而不是Outlet嵌套Route组件，因此可以安全地删除它们。

<Router>
  <Routes>
    <Route exact path="/login" element={<Login />} />
    <Route exact path="/*" element={<AppBody />} > />
  </Routes>
</Router>