请将父级 <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>
                

我需要在代码中做什么更改来解决这个警告？

- Asif Biswas

Answer 1

这意味着 AppBody 渲染了更深层次的路由，路径需要指定通配符 * 以表明它可以匹配更常规/嵌套的路径。 react-router-dom 路由路径 总是 精确匹配，因此如果渲染子路由，则路径需要允许它们。将 path="/" 更改为 path="/*"。

由于 AppBody 渲染了路由并且没有用于嵌套的 Outlet，因此可以安全地删除它们。

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

- Drew Reese