请将“路由path="/">”更改为“路由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正在为嵌套的Route组件呈现路由而没有Outlet，所以可以安全地删除它们。

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